/* Server connections: pairing, connection status, live editing, merges. */

.animus-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--animus-border);
  font-size: 0.75rem;
  line-height: 1.3;
  min-width: 0;
  white-space: nowrap;
}

/* A long state such as "Connection refused" shortens in a narrow top bar
   instead of pushing the controls; the full state is in the title. */
.animus-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.animus-pill-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  background: var(--animus-muted);
}

.animus-pill.is-online .animus-pill-dot { background: var(--animus-ok); }
.animus-pill.is-waiting .animus-pill-dot { background: var(--animus-warning); }
.animus-pill.is-error .animus-pill-dot { background: var(--animus-error); }
.animus-pill.is-error { border-color: var(--animus-error); }

.animus-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}

.animus-facts dt { color: var(--animus-muted); }
.animus-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Pairing: one column, the fingerprint as the thing to check. */
.animus-pair {
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
  margin-inline: auto;
}

.animus-pair h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; overflow-wrap: anywhere; }
.animus-pair-kicker { margin: 0; color: var(--animus-muted); font-size: 0.875rem; }

.animus-pair-fingerprint {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--animus-border);
}

.animus-pair-fingerprint code { font-size: 0.9375rem; overflow-wrap: anywhere; }

.animus-pair-paths {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--animus-muted);
  font-size: 0.8125rem;
}

.animus-pair-paths code { overflow-wrap: anywhere; }
.animus-pair-remember { display: flex; align-items: center; gap: 0.5rem; }
.animus-pair-cancel { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.5rem; }
.animus-pair-paste { margin-top: 0.75rem; }
.animus-pair-paste > :first-child { flex: 1 1 16rem; }
.animus-server-mark { display: block; }

/* The home page's converter button names four plugins, so it wraps on
   phones; the button component sets nowrap inline, hence the !important. */
#animus-open-converter { white-space: normal !important; height: auto !important; min-height: 2.75rem; max-width: 100%; text-align: start; }
.animus-sync-empty { display: grid; gap: 0.5rem; justify-items: start; }

.animus-server-list li { align-items: center; }

.animus-live {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--animus-border);
  background: var(--animus-panel);
}

.animus-live-head,
.animus-live-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.animus-live-actions > :has(input) { flex: 1 1 12rem; }
.animus-live-links { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: auto; }
.animus-live-group { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.animus-live-pair > :first-child { flex: 1 1 14rem; }

.animus-live-cause {
  margin: 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.animus-live-confirm { flex: 1 1 100%; min-width: 0; border-color: var(--animus-warning); }
.animus-live-confirm > span { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }

.animus-live-count { font-size: 0.875rem; }
.animus-live-preview { margin: 0; font-size: 0.875rem; }

.animus-live-drafts {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.animus-live-drafts li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.animus-live-drafts .animus-badge,
.animus-tree-item .animus-badge.is-draft {
  border: 1px solid var(--animus-border);
}

.animus-badge.is-modified,
.animus-badge.is-draft[data-draft="edited"] { border-color: var(--animus-warning); }
.animus-badge.is-created,
.animus-badge.is-draft[data-draft="new"] { border-color: var(--animus-ok); }
.animus-badge.is-deleted,
.animus-badge.is-draft[data-draft="conflict"],
.animus-badge.is-draft[data-draft="stale"] { border-color: var(--animus-error); }

.animus-tree-item .animus-badge.is-draft { grid-row: auto; font-size: 0.6875rem; }

.animus-live-log { font-size: 0.8125rem; }
.animus-live-log summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.animus-live-log ul { margin: 0.5rem 0 0; padding-inline-start: 1rem; }
.animus-live-log li.is-error { color: var(--animus-error); }

.animus-conflicts { display: grid; gap: 0.75rem; }
.animus-conflict { border-color: var(--animus-error); }
.animus-conflict h3 { margin: 0 0 0.5rem; font-size: 1rem; }

.animus-merge-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
}

.animus-merge-table th,
.animus-merge-table td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--animus-border);
  text-align: start;
  vertical-align: top;
}

.animus-merge-table code { overflow-wrap: anywhere; }

/* The scroll box pads its content so focus rings on the rows stay visible. */
.animus-catalog {
  display: grid;
  gap: 0.75rem;
  max-height: 32rem;
  overflow: auto;
  margin: 0.75rem 0 0;
  padding: 0.25rem;
}

.animus-catalog-group h3 { margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--animus-muted); }

.animus-catalog ul {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animus-catalog li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.animus-catalog li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.animus-catalog-meta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
.animus-scopes { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.animus-status-hint { display: block; margin-top: 0.25rem; font-size: 0.875rem; }
.animus-stats-none { margin: 0.25rem 0 0; font-size: 0.8125rem; }
.animus-citizens-lead { margin: 0 0 0.5rem; font-weight: 600; }

@media (max-width: 760px) {
  .animus-merge-table thead { display: none; }
  .animus-merge-table tr { display: grid; padding: 0.5rem 0; border-bottom: 1px solid var(--animus-border); }
  .animus-merge-table td { border: 0; padding: 0.125rem 0; }
  .animus-merge-table td[data-label]::before { content: attr(data-label) " "; color: var(--animus-muted); }
  .animus-facts { grid-template-columns: 1fr; }
  .animus-live { padding: 0.75rem; }
  .animus-live-links { margin-inline-start: 0; }
  .animus-live-actions > :has(input) { flex-basis: 100%; }
}