Show binding partners and merge them with binders into an Interactions section

backend/app/protein/api/routes/explore.py

@@ -79,6 +79,7 @@ async def get_chain(pdb_id: str, chain_id: str):
         raise HTTPException(status_code=404, detail=f"{pdb_id.upper()}.{chain_id} is not in MuSProt")
     node["family"] = await run_in_threadpool(catalog.sequence_summary, node["sequence_id"])
     node["ecod_names"] = await run_in_threadpool(catalog.ecod_names, None, node["ecod_fids"])
+    node["binding_partners"] = await run_in_threadpool(records.get_partners, node["pdb_id"], node["auth_asym_id"])
     return node
 
 
@@ -100,12 +101,18 @@ async def get_chain_transitions(pdb_id: str, chain_id: str):
                 chain_composition=m["chain_composition"],
                 binders=m["binders"],
                 release_date=m["release_date"],
+                partners=m["partners"],
             )
+    home = members.get((node["pdb_id"], node["auth_asym_id"]))
+    keys = {k for m in members.values() for k in m["partners"]}
+    names = await run_in_threadpool(catalog.partner_names, None, keys)
     return {
         "pdb_id": node["pdb_id"],
         "auth_asym_id": node["auth_asym_id"],
         "state_id": node["state_id"],
         "sequence_id": node["sequence_id"],
+        "partners": home["partners"] if home else [],
+        "partner_names": names,
         "transitions": edges,
     }
 

backend/app/protein/catalog.py

@@ -104,9 +104,39 @@ def _member_dict(r: sqlite3.Row) -> Dict[str, Any]:
         "pfam_id": r["pfam_id"],
         "ecod_id": r["ecod_id"],
         "ecod_fid": r["ecod_fid"],
+        "partners": json.loads(r["partners"]) if "partners" in r.keys() and r["partners"] else [],
     }
 
 
+def partner_names(conn: Optional[sqlite3.Connection], keys) -> Dict[str, Dict[str, Any]]:
+    """Display names for binding-partner keys (see build_index.partner_key)."""
+    keys = sorted({k for k in keys if k and k != "self"})
+    if not keys:
+        return {}
+    own = conn is None
+    conn = conn or _connect()
+    if conn is None:
+        return {}
+    out: Dict[str, Dict[str, Any]] = {}
+    try:
+        for i in range(0, len(keys), 500):
+            chunk = keys[i:i + 500]
+            try:
+                rows = conn.execute(
+                    f"SELECT key, type, description, uniprot, n_chains FROM partner_name "
+                    f"WHERE key IN ({','.join('?' * len(chunk))})",
+                    chunk,
+                ).fetchall()
+            except sqlite3.OperationalError:  # index built before binding partners existed
+                return {}
+            for r in rows:
+                out[r[0]] = {"type": r[1], "description": r[2], "uniprot": r[3], "n_chains": r[4]}
+    finally:
+        if own:
+            conn.close()
+    return out
+
+
 def ecod_names(conn: Optional[sqlite3.Connection], f_ids: List[str] = (), h_ids: List[str] = ()) -> Dict[str, Any]:
     """Names for ECOD family ids (x.h.t.f) and homology ids (x.h)."""
     own = conn is None
@@ -261,6 +291,7 @@ def get_sequence(sequence_id: str) -> Optional[Dict[str, Any]]:
             )
             if r["state_a"] in shown and r["state_b"] in shown
         ]
+        seq["partner_names"] = partner_names(conn, (k for m in members for k in m["partners"]))
         seq["ecod_group"] = group_info(conn, seq["ecod_hset"])
         seq["ecod_names"] = ecod_names(conn, h_ids=seq["ecod_hset"])
     finally:

backend/app/protein/records.py

@@ -275,3 +275,65 @@ def list_entry_chains(pdb_id: str) -> List[Dict[str, Any]]:
         }
         for r in rows
     ]
+
+
+# Binding partners (pipeline step 12). A contact counts as a biological partner
+# when the target side has at least PARTNER_MIN_RES interface residues and the
+# contact exists in biological assembly 1 (entries without assembly records:
+# not only via a symmetry mate). Must match backend/scripts/build_index.py.
+PARTNER_MIN_RES = 5
+
+
+def _parse_semicolon_ranges(raw: Optional[str]) -> List[List[int]]:
+    """'12-15;40' -> [[12, 15], [40, 40]]."""
+    return _parse_ranges((raw or "").replace(";", ","))
+
+
+def get_partners(pdb_id: str, chain: str) -> List[Dict[str, Any]]:
+    """Polymer chains in contact with one chain, largest interface first."""
+    conn = _connect()
+    try:
+        try:
+            rows = conn.execute(
+                "SELECT * FROM partner WHERE pdb_id = ? COLLATE NOCASE AND auth_asym_id = ?",
+                (pdb_id, chain),
+            ).fetchall()
+        except sqlite3.OperationalError:  # DB without the partner table
+            return []
+        observed = {
+            r[0]: (r[1], integer(r[2]))
+            for r in conn.execute(
+                "SELECT auth_asym_id, sequence_id, state_id FROM node WHERE pdb_id = ? COLLATE NOCASE",
+                (pdb_id,),
+            )
+        }
+    finally:
+        conn.close()
+
+    out = []
+    for r in rows:
+        n_res = integer(r["n_res_target"]) or 0
+        asm = text(r["in_assembly1"])
+        via_sym = text(r["via_symmetry"]) == "1"
+        in_asm = None if asm is None else asm == "1"
+        biological = n_res >= PARTNER_MIN_RES and (in_asm if in_asm is not None else not via_sym)
+        seen = observed.get(r["partner_chain"])
+        out.append({
+            "chain": r["partner_chain"],
+            "entity": text(r["partner_entity"]),
+            "type": text(r["partner_type"]) or "other",
+            "description": text(r["partner_description"]),
+            "uniprot": text(r["partner_uniprot"]),
+            "n_res_target": n_res,
+            "n_res_partner": integer(r["n_res_partner"]),
+            "n_contacts": integer(r["n_contacts"]),
+            "interface": _parse_semicolon_ranges(r["target_interface"]),
+            "same_entity": text(r["same_entity"]) == "1",
+            "via_symmetry": via_sym,
+            "in_assembly1": in_asm,
+            "biological": biological,
+            "observation": {"sequence_id": seen[0], "state_id": seen[1]} if seen else None,
+        })
+    out.sort(key=lambda p: (not p["biological"], -p["n_res_target"]))
+    return out
+

backend/assets/MuSProt_documentation.md

@@ -14,6 +14,8 @@
 | State clusters | 162,601 |
 | Transition triplets (`edge` rows, ordered observation pairs) | 113,581,394 |
 | Transitions between distinct states | 25,530,666 |
+| Polymer contacts (`partner` rows, observation × contacting chain) | 3,481,852 |
+| Observations with a bound polymer partner (≥ 5 interface residues, in assembly 1) | 637,022 (393,476 with a hetero partner) |
 
 ---
 
@@ -59,7 +61,7 @@ coverage        = aligned_length / max(L_A, L_B)
 
 ## Download
 
-The full dataset is a single SQLite database file (`MuSProt.db`, ~37 GB) with two tables, **`node`** and **`edge`**. Download it with the **Download** button at the top of the site.
+The full dataset is a single SQLite database file (`MuSProt.db`, ~37 GB) with three tables: **`node`**, **`edge`** and **`partner`**. Download it with the **Download** button at the top of the site.
 
 Atomic coordinates are not included: fetch mmCIF files from the [RCSB PDB](https://www.rcsb.org) or [PDBe](https://www.ebi.ac.uk/pdbe/) using `pdb_id` and `auth_asym_id`.
 
@@ -157,6 +159,27 @@ One row per ordered pair of observations (A → B) of the same sequence.
 
 When A and B share no resolved residues, `tm_aln`, `pair_similarity` and `pair_fidelity` are empty and `RMSD` / `coverage` are stored as `0.0`.
 
+### Table: `partner`
+
+One row per (observation, contacting polymer chain) of the same PDB entry: every protein, DNA or RNA chain with a heavy atom within 4.5 Å of the observation (first model, hydrogens removed), including contacts to crystallographic symmetry copies. Small-molecule binders are in `node.binders`. All values are stored as TEXT.
+
+| Column | Type | Description |
+|---|---|---|
+| `pdb_id`, `auth_asym_id` | TEXT | The observation (same keys as `node`) |
+| `partner_chain` | TEXT | `auth_asym_id` of the contacting chain; equal to `auth_asym_id` when the chain touches its own symmetry copy |
+| `partner_entity` | TEXT | Entity id of the partner in the PDB entry |
+| `partner_type` | TEXT | `protein`, `dna`, `rna`, `hybrid` or `other` |
+| `partner_description` | TEXT | Entity description (`_entity.pdbx_description`) |
+| `partner_uniprot` | TEXT | UniProt accession(s) of the partner chain from SIFTS (`;`-joined), falling back to the entry's `_struct_ref` |
+| `n_res_target`, `n_res_partner` | TEXT | Interface residues on the observation / on the partner |
+| `n_contacts` | TEXT | Atom pairs within 4.5 Å |
+| `target_interface` | TEXT | Interface residues on the observation, `label_seq_id` ranges (`12-15;40`) |
+| `same_entity` | TEXT | `1` when the partner is another copy of the same entity (homo-oligomer contact) |
+| `via_symmetry` | TEXT | `1` when the two chains only touch through a crystallographic symmetry copy |
+| `in_assembly1` | TEXT | `1` when the contact exists in biological assembly 1, `0` when it does not (typical of crystal packing), empty when the entry has no assembly records |
+
+No interface-size cut is applied in the table. The website counts a **bound partner** when `n_res_target ≥ 5` and `in_assembly1 = 1` (for entries without assembly records: `via_symmetry = 0`); all other rows are shown as crystal or marginal contacts.
+
 ### Order / disorder labels
 
 These columns describe the *observed* resolved state (residues with or without modelled coordinates), not intrinsic disorder: a residue can lack density because it is flexible, or because of crystal contacts, occupancy or modelling choices. They are only computed when both structures use the same experimental method and at least one is not NMR (NMR models build every residue); otherwise `delta_order_valid` is `False` and the counts are empty.
@@ -176,7 +199,7 @@ MuSProt is organised as a hierarchical graph. In the **outer layer**, each seque
 
 ### Indexes
 
-Both tables are indexed for per-chain lookup: `node(pdb_id COLLATE NOCASE, auth_asym_id)` and `edge(pdb_id_A COLLATE NOCASE, auth_asym_id_A)`. Use the same collation in queries to hit the index:
+All three tables are indexed for per-chain lookup: `node(pdb_id COLLATE NOCASE, auth_asym_id)`, `edge(pdb_id_A COLLATE NOCASE, auth_asym_id_A)` and `partner(pdb_id COLLATE NOCASE, auth_asym_id)`. Use the same collation in queries to hit the index:
 
 ```sql
 SELECT * FROM edge WHERE pdb_id_A = '3vgk' COLLATE NOCASE AND auth_asym_id_A = 'A';
@@ -237,6 +260,21 @@ df = pd.read_sql("""
 """, conn)
 ```
 
+### Observations of one sequence and what they are bound to
+
+```python
+df = pd.read_sql("""
+    SELECT n.pdb_id, n.auth_asym_id, n.state_id,
+           p.partner_chain, p.partner_description, p.partner_uniprot,
+           CAST(p.n_res_target AS INTEGER) AS interface_residues
+    FROM node n
+    JOIN partner p ON p.pdb_id = n.pdb_id COLLATE NOCASE AND p.auth_asym_id = n.auth_asym_id
+    WHERE n.uniprot_id = 'P0DP23'
+      AND p.same_entity = '0' AND p.in_assembly1 = '1'
+      AND CAST(p.n_res_target AS INTEGER) >= 5
+""", conn)
+```
+
 Scanning `node` by `uniprot_id` or `sequence_id` reads the whole table; for repeated queries create an index first (`CREATE INDEX idx_node_seq ON node(sequence_id)`).
 
 ---

backend/scripts/build_index.py

@@ -5,7 +5,9 @@ Build the website sidecars from MuSProt.db.
 Outputs (into --out-dir):
   MuSProt-index.db   compact, indexed lookup tables the website queries directly
       sequence       one row per sequence_id (catalog: counts, representative, function)
-      member         one row per chain observation (light columns only)
+      member         one row per chain observation (light columns only), incl. its
+                     biological binding partners (JSON list of partner keys)
+      partner_name   partner key -> type, description, UniProt (from the partner table)
       state          one row per (sequence_id, state_id)
       state_pair     mean similarity / fidelity between two states of a sequence
       function_fts   FTS5 over UniProt / CATH / ECOD / Pfam / top ranked functions per sequence
@@ -127,6 +129,95 @@ def load_ecod_names(path: Path | None) -> tuple[dict, dict]:
     return fam, hom
 
 
+# ─────────────────────────────────────────────────────────────── binding partners
+# partner table (pipeline step 12): one row per (target chain, partner chain).
+# A contact counts as a biological partner when the target side has at least
+# PARTNER_MIN_RES interface residues and the contact exists in biological
+# assembly 1 (entries without assembly records: not only via a symmetry mate).
+# Must match app/protein/records.py.
+PARTNER_MIN_RES = 5
+NUCLEIC_LABEL = {"dna": "DNA", "rna": "RNA", "hybrid": "DNA/RNA hybrid"}
+
+
+def partner_is_biological(n_res_target, via_symmetry, in_assembly1) -> bool:
+    if (to_int(n_res_target) or 0) < PARTNER_MIN_RES:
+        return False
+    if in_assembly1 in ("0", "1"):
+        return in_assembly1 == "1"
+    return via_symmetry == "0"
+
+
+def _sequence_like(desc: str) -> bool:
+    """Nucleic-acid descriptions that just spell the sequence, e.g. DNA (5'-D(*CP*GP*...)-3')."""
+    d = desc.strip().upper()
+    return "*" in d or d.startswith(("5'", "DNA (", "RNA (", "DNA(", "RNA(")) or d in ("DNA", "RNA")
+
+
+def partner_key(ptype: str, desc: str, uniprot: str) -> str:
+    """UniProt accession(s) when known; otherwise '<type>:<description>', or just
+    the polymer type for nucleic acids whose description only spells the sequence."""
+    if uniprot:
+        return uniprot
+    if not desc or (ptype in NUCLEIC_LABEL and _sequence_like(desc)):
+        return ptype or "other"
+    d = " ".join(desc.lower().split()).replace("ribosomal rna", "rrna")
+    return f"{ptype}:{d}"
+
+
+def load_partners(src: sqlite3.Connection):
+    """(pdb_lower, chain) -> [(key, n_res_target)] biological partners, largest
+    interface first; 'self' marks another copy of the same entity. Also returns
+    key -> Counter of (type, description, uniprot) for naming."""
+    has = src.execute("SELECT 1 FROM sqlite_master WHERE type='table' AND name='partner'").fetchone()
+    if not has:
+        log("  no partner table in the DB; skipping binding partners")
+        return {}, {}
+    per_chain: dict = defaultdict(dict)
+    names: dict = defaultdict(Counter)
+    n = 0
+    for pdb, chain, ptype, desc, unp, nres, same, sym, asm in src.execute(
+        "SELECT pdb_id, auth_asym_id, partner_type, partner_description, partner_uniprot, "
+        "n_res_target, same_entity, via_symmetry, in_assembly1 FROM partner"
+    ):
+        n += 1
+        if not partner_is_biological(nres, sym, asm):
+            continue
+        if same == "1":
+            key = "self"
+        else:
+            key = partner_key(ptype or "", desc or "", unp or "")
+            names[key][(ptype or "", desc or "", unp or "")] += 1
+        d = per_chain[(pdb.lower(), chain)]
+        d[key] = max(d.get(key, 0), to_int(nres) or 0)
+    log(f"  partner rows: {n:,}; chains with a biological partner: {len(per_chain):,}")
+    out = {k: sorted(v.items(), key=lambda kv: -kv[1]) for k, v in per_chain.items()}
+    return out, names
+
+
+def write_partner_names(dst: sqlite3.Connection, names: dict, used: Counter) -> None:
+    dst.executescript(
+        """
+        DROP TABLE IF EXISTS partner_name;
+        CREATE TABLE partner_name (
+            key TEXT PRIMARY KEY,
+            type TEXT,
+            description TEXT,
+            uniprot TEXT,
+            n_chains INTEGER
+        );
+        """
+    )
+    rows = []
+    for key, n_chains in used.items():
+        if key == "self":
+            continue
+        (ptype, desc, unp), _ = names[key].most_common(1)[0]
+        if key in NUCLEIC_LABEL:
+            desc = NUCLEIC_LABEL[key]
+        rows.append((key, ptype, desc, unp or None, n_chains))
+    dst.executemany("INSERT INTO partner_name VALUES (?,?,?,?,?)", rows)
+
+
 # ─────────────────────────────────────────────────────────────── node pass
 NODE_SQL = """
 SELECT sequence_id, uniprot_id, pdb_id, auth_asym_id, sequence_length,
@@ -161,16 +252,20 @@ def build_members(src: sqlite3.Connection, dst: sqlite3.Connection, limit: int |
             cath_id TEXT,
             pfam_id TEXT,
             ecod_id TEXT,
-            ecod_fid TEXT
+            ecod_fid TEXT,
+            partners TEXT
         );
         """
     )
+    partners, partner_names = load_partners(src)
     seqs: dict[str, dict] = {}
     functions: dict[str, list[str]] = {}
     ov = {
         "method": Counter(), "binding": Counter(), "composition": Counter(),
         "npp": Counter(), "year": Counter(), "cath": Counter(),
         "resolution": [], "length": {}, "uniprot": set(), "entries": set(),
+        "partner_used": Counter(), "partner_type": Counter(),
+        "with_partner": 0, "with_hetero_partner": 0,
     }
     sql = NODE_SQL + (f" LIMIT {int(limit)}" if limit else "")
     batch = []
@@ -181,11 +276,24 @@ def build_members(src: sqlite3.Connection, dst: sqlite3.Connection, limit: int |
          pfam, ecod_ids, ecod_fid) = row
         state_i = to_int(state)
         res_f = to_float(resolution)
+        # another entity with the same UniProt accession is still a homo contact
+        pkeys = []
+        for key, _ in partners.get((pdb.lower(), chain), ()):
+            key = "self" if uniprot and key == uniprot else key
+            if key not in pkeys:
+                pkeys.append(key)
+        if pkeys:
+            ov["with_partner"] += 1
+            hetero = [k for k in pkeys if k != "self"]
+            ov["with_hetero_partner"] += bool(hetero)
+            ov["partner_used"].update(pkeys)
+            ov["partner_type"].update({partner_names[k].most_common(1)[0][0][0] for k in hetero})
         batch.append((
             seq_id, state_i, pdb, chain, uniprot or None, method or None, res_f,
             binding or None, comp or None, binders or None, date or None,
             to_float(res_cov), to_int(n_res), to_float(ph), to_float(temp),
             cath_id or None, pfam or None, ecod_ids or None, ecod_fid or None,
+            json.dumps(pkeys, separators=(",", ":")) if pkeys else None,
         ))
         s = seqs.get(seq_id)
         if s is None:
@@ -237,12 +345,28 @@ def build_members(src: sqlite3.Connection, dst: sqlite3.Connection, limit: int |
 
         n += 1
         if len(batch) >= 50000:
-            dst.executemany(f"INSERT INTO member VALUES ({','.join('?' * 19)})", batch)
+            dst.executemany(f"INSERT INTO member VALUES ({','.join('?' * 20)})", batch)
             batch.clear()
             log(f"  node rows: {n:,}")
     if batch:
-        dst.executemany(f"INSERT INTO member VALUES ({','.join('?' * 19)})", batch)
+        dst.executemany(f"INSERT INTO member VALUES ({','.join('?' * 20)})", batch)
     log(f"  node rows total: {n:,}; sequences: {len(seqs):,}")
+    write_partner_names(dst, partner_names, ov["partner_used"])
+    top = []
+    for key, c in ov["partner_used"].most_common(41):
+        if key == "self":
+            continue
+        (ptype, desc, unp), _ = partner_names[key].most_common(1)[0]
+        top.append({"key": key, "type": ptype, "label": NUCLEIC_LABEL.get(key, desc),
+                    "uniprot": unp or None, "value": c})
+    ov["partners"] = {
+        "observations_with_partner": ov["with_partner"],
+        "observations_with_hetero_partner": ov["with_hetero_partner"],
+        "observations_homo_only": ov["with_partner"] - ov["with_hetero_partner"],
+        "distinct_partners": len([k for k in ov["partner_used"] if k != "self"]),
+        "by_type": [{"label": k, "value": v} for k, v in ov["partner_type"].most_common()],
+        "top": top[:40],
+    }
     dst.executescript(
         """
         CREATE INDEX idx_member_seq ON member(sequence_id, state_id);
@@ -681,6 +805,7 @@ def build_overview(seqs, ov, n_nodes, edges, state_fid) -> dict:
         "chain_composition": [{"label": k, "value": v} for k, v in ov["composition"].most_common()],
         "nucleic_acid_binding": [{"label": k, "value": v} for k, v in ov["npp"].most_common()],
         "release_year": [{"label": k, "value": ov["year"][k]} for k in sorted(ov["year"])],
+        "partners": ov.get("partners"),
         "pair_fidelity": [
             {"label": k, "value": edges["pair_fidelity"].get(k, 0),
              "cross_state": edges["pair_fidelity_cross"].get(k, 0)}

frontend/src/components/Partners.tsx

@@ -0,0 +1,324 @@
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import type { BindingPartner, Member, PartnerName, StateInfo } from '../lib/api';
+import { chainPath, fmtInt } from '../lib/format';
+import { EmptyState, ExternalLink } from './ui';
+
+/** Key of an observation's biological binding partners that are not copies of itself. */
+export const SELF = 'self';
+export const NO_PARTNER = '__none__';
+
+const TYPE_LABEL: Record<string, string> = { protein: 'Protein', dna: 'DNA', rna: 'RNA', hybrid: 'DNA/RNA', other: 'Polymer' };
+
+/** Display label for a partner key ('self', a UniProt accession, 'dna', 'protein:<description>'). */
+export function partnerLabel(key: string, names?: Record<string, PartnerName>): string {
+  if (key === SELF) return 'Homo-oligomer';
+  if (key === NO_PARTNER) return 'No partner';
+  const n = names?.[key];
+  if (n?.description) return n.description;
+  const i = key.indexOf(':');
+  if (i > 0) return key.slice(i + 1);
+  return TYPE_LABEL[key] ?? key;
+}
+
+export function partnerType(key: string, names?: Record<string, PartnerName>): string {
+  if (key === SELF) return 'self';
+  return names?.[key]?.type ?? (key.includes(':') ? key.split(':')[0] : TYPE_LABEL[key] ? key : 'protein');
+}
+
+/** Readable name for a partner chain; oligonucleotides described by their sequence become "DNA strand (21 nt)". */
+export function polymerName(description: string | null, type: string, entity?: string | null): string {
+  if (!description) return entity ? `Entity ${entity}` : TYPE_LABEL[type] ?? type;
+  if ((type === 'dna' || type === 'rna' || type === 'hybrid') && /\*|^5'|\(5'/.test(description)) {
+    const n = (description.match(/\*/g) ?? []).length;
+    return `${TYPE_LABEL[type]} strand${n ? ` (${n} nt)` : ''}`;
+  }
+  return description;
+}
+
+function short(s: string, max = 28) {
+  return s.length > max ? `${s.slice(0, max - 1)}…` : s;
+}
+
+export function sameSet(a: string[] = [], b: string[] = []) {
+  if (a.length !== b.length) return false;
+  const s = new Set(a);
+  return b.every((k) => s.has(k));
+}
+
+/** Compact partner chips; with `home`, partners absent from it are marked as gained and missing ones as lost. */
+export function PartnerChips({
+  keys = [],
+  names,
+  home,
+  max = 2,
+}: {
+  keys?: string[];
+  names?: Record<string, PartnerName>;
+  home?: string[];
+  max?: number;
+}) {
+  const homeSet = home ? new Set(home) : null;
+  const lost = home ? home.filter((k) => !keys.includes(k)) : [];
+  const title = [
+    keys.length ? `Partners: ${keys.map((k) => partnerLabel(k, names)).join(', ')}` : 'No biological polymer partner',
+    lost.length ? `Not bound here (bound in this chain): ${lost.map((k) => partnerLabel(k, names)).join(', ')}` : '',
+  ]
+    .filter(Boolean)
+    .join('\n');
+  if (!keys.length && !lost.length) return <span className="muted">—</span>;
+  return (
+    <span className="pchips" title={title}>
+      {keys.slice(0, max).map((k) => (
+        <span
+          key={k}
+          className={`pchip pchip--${partnerType(k, names)} ${homeSet && !homeSet.has(k) ? 'is-gained' : ''}`}
+        >
+          {short(partnerLabel(k, names), 22)}
+        </span>
+      ))}
+      {keys.length > max && <span className="pchip pchip--more">+{keys.length - max}</span>}
+      {!keys.length && <span className="muted small">none</span>}
+      {lost.length > 0 && <span className="pchip pchip--lost">−{lost.length}</span>}
+    </span>
+  );
+}
+
+/* ───────────────────────────── chain page: every contacting polymer chain */
+
+function kindOf(p: BindingPartner): { label: string; tone: string; hint: string } {
+  if (p.biological)
+    return p.same_entity
+      ? { label: 'Homo-oligomer', tone: 'homo', hint: 'Another copy of the same entity, in biological assembly 1' }
+      : { label: 'Bound partner', tone: 'bio', hint: 'A different polymer, in contact within biological assembly 1' };
+  if (p.n_res_target < 5)
+    return { label: 'Marginal', tone: 'weak', hint: 'Fewer than 5 interface residues on this chain' };
+  return {
+    label: 'Crystal contact',
+    tone: 'weak',
+    hint: p.via_symmetry
+      ? 'Touches only a symmetry mate and is not part of biological assembly 1 (crystal packing)'
+      : 'In the deposited coordinates but not in biological assembly 1 (likely crystal packing)',
+  };
+}
+
+function InterfaceStrip({ ranges, length }: { ranges: Array<[number, number]>; length: number }) {
+  if (!length) return null;
+  return (
+    <span className="istrip" role="img" aria-label={`Interface residues ${ranges.map(([a, b]) => (a === b ? a : `${a}-${b}`)).join(', ')}`}>
+      {ranges.map(([a, b]) => (
+        <span
+          key={a}
+          className="istrip__seg"
+          style={{ left: `${((a - 1) / length) * 100}%`, width: `max(2px, ${((b - a + 1) / length) * 100}%)` }}
+        />
+      ))}
+    </span>
+  );
+}
+
+function fmtRanges(r: Array<[number, number]>) {
+  return r.map(([a, b]) => (a === b ? `${a}` : `${a}–${b}`)).join(', ');
+}
+
+export function BindingPartners({
+  partners,
+  pdb,
+  length,
+}: {
+  partners: BindingPartner[];
+  pdb: string;
+  length: number;
+}) {
+  const nWeak = partners.filter((p) => !p.biological).length;
+  const [showAll, setShowAll] = useState(false);
+  const rows = showAll ? partners : partners.filter((p) => p.biological);
+
+  if (!partners.length)
+    return <EmptyState title="No polymer contacts">This chain touches no other protein, DNA or RNA chain within 4.5 Å.</EmptyState>;
+
+  return (
+    <>
+      {rows.length === 0 ? (
+        <p className="muted">No biological partner: every contact is a crystal contact or marginal.</p>
+      ) : (
+        <div className="table-wrap">
+          <table className="table table--dense">
+            <thead>
+              <tr>
+                <th>Partner</th>
+                <th>Chain</th>
+                <th>Kind</th>
+                <th className="num" title="Interface residues on this chain / on the partner">
+                  Interface
+                </th>
+                <th>Interface on this chain (SEQRES)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((p) => {
+                const k = kindOf(p);
+                return (
+                  <tr key={p.chain} className={p.biological ? '' : 'is-dim'}>
+                    <td>
+                      <span className="partner-name">
+                        <span className={`ptype ptype--${p.type}`}>{TYPE_LABEL[p.type] ?? p.type}</span>
+                        <span className="partner-name__text" title={p.description ?? undefined}>
+                          {polymerName(p.description, p.type, p.entity)}
+                        </span>
+                      </span>
+                      {p.uniprot && (
+                        <span className="partner-name__ids">
+                          {p.uniprot.split(';').map((u) => (
+                            <ExternalLink key={u} href={`https://www.uniprot.org/uniprotkb/${u}`}>
+                              {u}
+                            </ExternalLink>
+                          ))}
+                        </span>
+                      )}
+                    </td>
+                    <td className="mono">
+                      {p.observation ? (
+                        <Link to={chainPath(pdb, p.chain)} title={`${p.observation.sequence_id}, state ${p.observation.state_id ?? '?'}`}>
+                          {pdb.toUpperCase()}.{p.chain}
+                        </Link>
+                      ) : (
+                        `${pdb.toUpperCase()}.${p.chain}`
+                      )}
+                      {p.via_symmetry && (
+                        <span className="muted small" title="Contact is with a crystallographic symmetry copy of this chain">
+                          {' '}
+                          (sym)
+                        </span>
+                      )}
+                    </td>
+                    <td>
+                      <span className={`pkind pkind--${k.tone}`} title={k.hint}>
+                        {k.label}
+                      </span>
+                    </td>
+                    <td className="num tabular" title={`${fmtInt(p.n_contacts)} atom contacts within 4.5 Å`}>
+                      {p.n_res_target} / {p.n_res_partner ?? '—'}
+                    </td>
+                    <td title={fmtRanges(p.interface)}>
+                      <InterfaceStrip ranges={p.interface} length={length} />
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {nWeak > 0 && (
+        <button type="button" className="btn btn--ghost btn--sm partners-toggle" onClick={() => setShowAll((s) => !s)}>
+          {showAll ? 'Hide' : 'Show'} {fmtInt(nWeak)} crystal / marginal contact{nWeak === 1 ? '' : 's'}
+        </button>
+      )}
+    </>
+  );
+}
+
+/* ───────────────────────────── sequence page: partners × states */
+
+const MAX_ROWS = 12;
+const MAX_COLS = 14;
+
+export function PartnersByState({
+  members,
+  states,
+  names,
+  selectedState,
+  onSelectState,
+  selectedPartner,
+  onSelectPartner,
+}: {
+  members: Member[];
+  states: StateInfo[];
+  names?: Record<string, PartnerName>;
+  selectedState: number | null;
+  onSelectState: (s: number | null) => void;
+  selectedPartner: string | null;
+  onSelectPartner: (k: string | null) => void;
+}) {
+  const { rows, cols, cell, perState } = useMemo(() => {
+    const total = new Map<string, number>();
+    const cell = new Map<string, number>();
+    const perState = new Map<number, number>();
+    for (const m of members) {
+      const keys = m.partners?.length ? m.partners : [NO_PARTNER];
+      perState.set(m.state_id, (perState.get(m.state_id) ?? 0) + 1);
+      for (const k of keys) {
+        total.set(k, (total.get(k) ?? 0) + 1);
+        cell.set(`${k}|${m.state_id}`, (cell.get(`${k}|${m.state_id}`) ?? 0) + 1);
+      }
+    }
+    const rows = [...total.entries()].sort((a, b) => b[1] - a[1]).slice(0, MAX_ROWS);
+    const cols = states.slice(0, MAX_COLS);
+    return { rows, cols, cell, perState };
+  }, [members, states]);
+
+  if (rows.length === 1 && rows[0][0] === NO_PARTNER)
+    return <p className="muted">No observation of this sequence has a biological polymer partner.</p>;
+
+  return (
+    <div className="pmatrix-wrap">
+      <table className="pmatrix">
+        <thead>
+          <tr>
+            <th className="pmatrix__corner">Partner \ state</th>
+            {cols.map((s) => (
+              <th key={s.state_id}>
+                <button
+                  type="button"
+                  className={`pmatrix__state ${selectedState === s.state_id ? 'is-on' : ''}`}
+                  onClick={() => onSelectState(selectedState === s.state_id ? null : s.state_id)}
+                  title={`State ${s.state_id}: ${fmtInt(perState.get(s.state_id))} observations`}
+                >
+                  {s.state_id}
+                </button>
+              </th>
+            ))}
+            <th className="num">All</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map(([k, n]) => (
+            <tr key={k}>
+              <th scope="row">
+                <button
+                  type="button"
+                  className={`pmatrix__partner ${selectedPartner === k ? 'is-on' : ''}`}
+                  onClick={() => onSelectPartner(selectedPartner === k ? null : k)}
+                  title={`${partnerLabel(k, names)}${names?.[k]?.uniprot ? ` (${names[k].uniprot})` : ''} — click to list these observations`}
+                >
+                  <span className={`ptype-dot ptype-dot--${partnerType(k, names)}`} aria-hidden />
+                  <span className="pmatrix__label">{partnerLabel(k, names)}</span>
+                  {names?.[k]?.uniprot && <span className="pmatrix__acc mono">{names[k].uniprot}</span>}
+                </button>
+              </th>
+              {cols.map((s) => {
+                const c = cell.get(`${k}|${s.state_id}`) ?? 0;
+                const frac = c / (perState.get(s.state_id) || 1);
+                const level = c === 0 ? 0 : Math.min(5, 1 + Math.floor(frac * 5));
+                return (
+                  <td
+                    key={s.state_id}
+                    className={`pmatrix__cell seq-bg-${level}`}
+                    title={`${partnerLabel(k, names)} in state ${s.state_id}: ${c} of ${perState.get(s.state_id)} observations`}
+                  >
+                    {c > 0 ? c : ''}
+                  </td>
+                );
+              })}
+              <td className="num tabular">{fmtInt(n)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {(states.length > MAX_COLS) && (
+        <p className="muted small">Showing the {MAX_COLS} largest of {states.length} states.</p>
+      )}
+    </div>
+  );
+}

frontend/src/components/StructureDiff.tsx

@@ -15,14 +15,17 @@ export const DIFF_COLORS: Record<CompareClass, string> = {
   missing: 'transparent',
 };
 
+/* In the superposed "both" view the alternative is drawn in one colour so it stands apart from this chain. */
+export const ALT_COLOR = '#9b7fd4';
+
 type Show = 'both' | 'A' | 'B';
 
-function runsFor(residues: StructureCompare['residues'], chain: 'A' | 'B'): ResidueColorRun[] {
+function runsFor(residues: StructureCompare['residues'], chain: 'A' | 'B', uniform?: string): ResidueColorRun[] {
   const absent: CompareClass = chain === 'A' ? 'only_b' : 'only_a';
   const runs: ResidueColorRun[] = [];
   for (const r of residues) {
     if (r.class === absent || r.class === 'missing') continue;
-    const color = DIFF_COLORS[r.class];
+    const color = uniform ?? DIFF_COLORS[r.class];
     const last = runs[runs.length - 1];
     if (last && last.color === color && last.end === r.pos - 1) last.end = r.pos;
     else runs.push({ chain, start: r.pos, end: r.pos, color });
@@ -61,7 +64,8 @@ export function StructureDiff({
 
   const runs = useMemo(() => {
     if (!d) return [];
-    return [...(show !== 'B' ? runsFor(d.residues, 'A') : []), ...(show !== 'A' ? runsFor(d.residues, 'B') : [])];
+    if (show === 'both') return [...runsFor(d.residues, 'A'), ...runsFor(d.residues, 'B', ALT_COLOR)];
+    return runsFor(d.residues, show);
   }, [d, show]);
 
   const url = api.compareStructureUrl(a.pdb_id, a.auth_asym_id, b.pdb_id, b.auth_asym_id, show === 'both' ? undefined : show);
@@ -83,10 +87,11 @@ export function StructureDiff({
           options={[
             { value: 'both', label: 'Both' },
             { value: 'A', label: `${la} (this)` },
-            { value: 'B', label: `${lb} (partner)` },
+            { value: 'B', label: `${lb} (alternative)` },
           ]}
         />
         <p className="muted small sdiff__stats">
+          {show === 'both' ? <>{la} is coloured by deviation; {lb} is violet. </> : null}
           {lb} superposed onto {la} on their largest rigid core: {fmtInt(d.counts.low)} of {fmtInt(d.n_common)} shared
           residues within {t.low} Å (core RMSD {fmtNum(d.rmsd_core, 2)} Å), maximum deviation {fmtNum(d.max_dev, 1)} Å.
         </p>
@@ -98,6 +103,11 @@ export function StructureDiff({
         label={show === 'both' ? `chain A = ${la} · chain B = ${lb}` : show === 'A' ? la : lb}
       />
       <ul className="legend sdiff__legend">
+        {show === 'both' && (
+          <li>
+            <Swatch color={ALT_COLOR} /> {lb} (alternative, superposed)
+          </li>
+        )}
         <li>
           <Swatch color={DIFF_COLORS.low} /> &lt; {t.low} Å <b className="tabular">{fmtInt(d.counts.low)}</b>
         </li>

frontend/src/components/Transitions.tsx

@@ -1,10 +1,11 @@
 import { useMemo, useState } from 'react';
 import { Box } from 'lucide-react';
-import { ENERGY_TERMS, type EnergyTerm, type OrderChange, type Transition } from '../lib/api';
+import { ENERGY_TERMS, type EnergyTerm, type OrderChange, type PartnerName, type Transition } from '../lib/api';
 import { FIDELITY_INFO, FIDELITY_ORDER, fidelityColor, fidelityKey } from '../lib/fidelity';
 import { chainLabel, fmtNum, fmtSigned, methodShort } from '../lib/format';
 import { niceTicks, Tooltip, useWidth, type TipState } from './charts';
 import { ChainLink, EmptyState, FidelityBadge, LigandBadge, Pagination, Segmented, Swatch } from './ui';
+import { PartnerChips, sameSet } from './Partners';
 
 export type Scope = 'cross' | 'same' | 'all';
 
@@ -41,7 +42,7 @@ export function TransitionScatter({
   return (
     <div className="chart scatter" ref={ref}>
       {width > 0 && (
-        <svg width={width} height={height} role="img" aria-label="Similarity versus RMSD for every partner observation">
+        <svg width={width} height={height} role="img" aria-label="Similarity versus RMSD for every alternative">
           <g transform={`translate(${m.left},${m.top})`}>
             {[0.5, 0.7, 0.95].filter((t) => t > xMin).map((t) => (
               <g key={t}>
@@ -170,6 +171,8 @@ export function TransitionsTable({
   scope,
   onScope,
   onView,
+  homePartners,
+  partnerNames,
 }: {
   items: Transition[];
   homeState: number | null;
@@ -179,8 +182,13 @@ export function TransitionsTable({
   onScope: (s: Scope) => void;
   /** open the superposed structure comparison for this partner */
   onView?: (t: Transition) => void;
+  /** this chain's biological binding partners, to flag alternatives bound to something else */
+  homePartners?: string[];
+  partnerNames?: Record<string, PartnerName>;
 }) {
   const [fid, setFid] = useState<string>('all');
+  const [bound, setBound] = useState<'all' | 'same' | 'diff'>('all');
+  const hasPartners = homePartners != null && items.some((t) => t.partners != null);
   const [sort, setSort] = useState<{ k: SortKey; dir: 1 | -1 }>({ k: 'similarity', dir: 1 });
   const [page, setPage] = useState(0);
 
@@ -192,8 +200,13 @@ export function TransitionsTable({
       ),
     [items, scope, homeState],
   );
+  const nSamePartners = useMemo(
+    () => scoped.filter((t) => sameSet(t.partners, homePartners)).length,
+    [scoped, homePartners],
+  );
   const rows = useMemo(() => {
-    const r = fid === 'all' ? scoped : scoped.filter((t) => fidelityKey(t.fidelity) === fid);
+    let r = fid === 'all' ? scoped : scoped.filter((t) => fidelityKey(t.fidelity) === fid);
+    if (bound !== 'all') r = r.filter((t) => sameSet(t.partners, homePartners) === (bound === 'same'));
     return [...r].sort((a, b) => {
       const va = sortValue(a, sort.k);
       const vb = sortValue(b, sort.k);
@@ -201,7 +214,7 @@ export function TransitionsTable({
       if (vb == null) return -1;
       return (va < vb ? -1 : va > vb ? 1 : 0) * sort.dir;
     });
-  }, [scoped, fid, sort]);
+  }, [scoped, fid, sort, bound, homePartners]);
   const fidCounts = useMemo(() => {
     const c: Record<string, number> = {};
     for (const t of scoped) c[fidelityKey(t.fidelity)] = (c[fidelityKey(t.fidelity)] ?? 0) + 1;
@@ -237,7 +250,7 @@ export function TransitionsTable({
     <>
       <div className="table-toolbar table-toolbar--wrap">
         <Segmented
-          label="Partner scope"
+          label="Alternative scope"
           value={scope}
           onChange={(v) => {
             onScope(v);
@@ -259,15 +272,30 @@ export function TransitionsTable({
           }}
           options={fidOptions}
         />
+        {hasPartners && (
+          <Segmented
+            label="Binding partners"
+            value={bound}
+            onChange={(v) => {
+              setBound(v);
+              setPage(0);
+            }}
+            options={[
+              { value: 'all', label: 'Any partners', count: scoped.length },
+              { value: 'same', label: 'Same as this chain', count: nSamePartners },
+              { value: 'diff', label: 'Different', count: scoped.length - nSamePartners },
+            ]}
+          />
+        )}
       </div>
       {rows.length === 0 ? (
-        <EmptyState title="No partner observations in this view" />
+        <EmptyState title="No alternatives in this view" />
       ) : (
         <div className="table-wrap">
           <table className="table table--dense table--rows table--sticky-first">
             <thead>
               <tr>
-                <th>Partner</th>
+                <th>Alternative</th>
                 {th('state', 'State')}
                 <th>Fidelity</th>
                 {th('similarity', 'Similarity')}
@@ -279,6 +307,7 @@ export function TransitionsTable({
                 <th>Method</th>
                 {th('resolution', 'Res. Å')}
                 <th>Ligand</th>
+                {hasPartners && <th title="Biological polymer partners of the alternative; outlined = not bound by this chain, −n = partners of this chain missing here">Binding partners</th>}
                 {th('date', 'Released')}
               </tr>
             </thead>
@@ -336,6 +365,11 @@ export function TransitionsTable({
                     <td>
                       <LigandBadge status={t.binding_status} />
                     </td>
+                    {hasPartners && (
+                      <td>
+                        <PartnerChips keys={t.partners} names={partnerNames} home={homePartners} />
+                      </td>
+                    )}
                     <td className="num tabular">{t.release_date ?? '—'}</td>
 
                   </tr>

frontend/src/lib/api.ts

@@ -45,6 +45,14 @@ export interface Overview {
     group_sizes: LabelValue[];
     largest: Array<{ hset: string; label: string; n_sequences: number; n_obs: number; n_multistate: number }>;
   };
+  partners?: {
+    observations_with_partner: number;
+    observations_with_hetero_partner: number;
+    observations_homo_only: number;
+    distinct_partners: number;
+    by_type: LabelValue[];
+    top: Array<LabelValue & { key: string; type: string; uniprot: string | null }>;
+  } | null;
   order?: {
     validity: LabelValue[];
     evidence: Array<LabelValue & { cross_state: number }>;
@@ -109,6 +117,35 @@ export interface Member {
   pfam_id: string | null;
   ecod_id: string | null;
   ecod_fid: string | null;
+  /** Biological binding-partner keys, largest interface first; 'self' = homo-oligomer contact. */
+  partners: string[];
+}
+
+/** Display info for a binding-partner key (UniProt accession, 'dna', 'rna', or 'type:description'). */
+export interface PartnerName {
+  type: string;
+  description: string | null;
+  uniprot: string | null;
+  n_chains: number;
+}
+
+/** One polymer chain in contact with an observation (pipeline step 12). */
+export interface BindingPartner {
+  chain: string;
+  entity: string | null;
+  type: string;
+  description: string | null;
+  uniprot: string | null;
+  n_res_target: number;
+  n_res_partner: number | null;
+  n_contacts: number | null;
+  /** Interface residues on this chain, label_seq_id ranges. */
+  interface: Array<[number, number]>;
+  same_entity: boolean;
+  via_symmetry: boolean;
+  in_assembly1: boolean | null;
+  biological: boolean;
+  observation: { sequence_id: string; state_id: number | null } | null;
 }
 
 export interface StatePair {
@@ -134,6 +171,7 @@ export interface SequenceDetail extends SequenceSummary {
   cath_superfamilies?: string[];
   ecod_group: EcodGroup | null;
   ecod_names: EcodNames;
+  partner_names?: Record<string, PartnerName>;
 }
 
 export const ENERGY_TERMS = ['Rosetta', 'FoldX', 'EvoEF2', 'RW', 'RW+'] as const;
@@ -177,6 +215,7 @@ export interface ChainDetail {
   };
   functions: RankedFunction[];
   family: (SequenceSummary & { states: StateInfo[] }) | null;
+  binding_partners?: BindingPartner[];
 }
 
 export interface Transition {
@@ -198,6 +237,7 @@ export interface Transition {
   chain_composition?: string | null;
   binders?: string[];
   release_date?: string | null;
+  partners?: string[];
 }
 
 /** Observed order/disorder change from A to B (resolved-state sense, not intrinsic disorder). */
@@ -250,6 +290,8 @@ export interface TransitionsResponse {
   auth_asym_id: string;
   state_id: number | null;
   sequence_id: string;
+  partners?: string[];
+  partner_names?: Record<string, PartnerName>;
   transitions: Transition[];
 }
 

frontend/src/pages/ChainPage.tsx

@@ -28,6 +28,8 @@ import { StructureDiff } from '../components/StructureDiff';
 import { DomainList } from '../components/Domains';
 import { OrderChangeView } from '../components/Transitions';
 import { fidelityColor } from '../lib/fidelity';
+import { BindingPartners, PartnerChips, polymerName } from '../components/Partners';
+import type { PartnerName } from '../lib/api';
 
 function Binder({ id }: { id: string }) {
   const name = usePromise(() => rcsbComponentName(id), [id]);
@@ -45,18 +47,76 @@ function Binder({ id }: { id: string }) {
   );
 }
 
+function BindingSummary({ c }: { c: ChainDetail }) {
+  const partners = c.binding_partners;
+  const bound = partners?.filter((p) => p.biological && !p.same_entity) ?? [];
+  const homo = partners?.filter((p) => p.biological && p.same_entity) ?? [];
+  const weak = partners?.filter((p) => !p.biological) ?? [];
+  const types = bound.reduce<Record<string, number>>((acc, p) => {
+    const t = p.type === 'protein' ? 'protein' : p.type === 'dna' ? 'DNA' : p.type === 'rna' ? 'RNA' : p.type;
+    acc[t] = (acc[t] ?? 0) + 1;
+    return acc;
+  }, {});
+  const nucleic = c.nucleic_acid_binding && c.nucleic_acid_binding !== 'None' ? c.nucleic_acid_binding : null;
+  return (
+    <div className="compare__metrics binding__summary">
+      <div className="metric" title="Holo = at least one small-molecule binder on this chain; polymers are not counted">
+        <span>Small molecules</span>
+        <b className="tabular">{c.binders.length}</b>
+        <small>
+          <LigandBadge status={c.binding_status} />
+        </small>
+      </div>
+      {partners && (
+        <>
+          <div className="metric" title="Different protein, DNA or RNA chains bound in biological assembly 1">
+            <span>Bound macromolecules</span>
+            <b className="tabular">{bound.length}</b>
+            <small>
+              {bound.length
+                ? Object.entries(types)
+                    .map(([t, n]) => `${n} ${t}`)
+                    .join(' · ')
+                : 'none'}
+            </small>
+          </div>
+          <div className="metric" title="Other copies of the same entity in contact, in biological assembly 1">
+            <span>Homo-oligomer contacts</span>
+            <b className="tabular">{homo.length}</b>
+            <small>copies of this entity</small>
+          </div>
+          <div className="metric" title="Crystal packing or fewer than 5 interface residues; not counted as binding">
+            <span>Crystal / marginal</span>
+            <b className="tabular">{weak.length}</b>
+            <small>not counted</small>
+          </div>
+        </>
+      )}
+      <div className="metric" title="Protein chain composition of the whole PDB entry">
+        <span>Entry assembly</span>
+        <b className="binding__text">{capitalize(c.chain_composition)}</b>
+        <small>{nucleic ? `${nucleic} in entry` : 'no nucleic acid in entry'}</small>
+      </div>
+    </div>
+  );
+}
+
 function ComparePanel({
   a,
   t,
   onClose,
   show3d,
   onShow3d,
+  homePartners,
+  partnerNames,
 }: {
   a: ChainDetail;
   t: Transition;
   onClose: () => void;
   show3d: boolean;
   onShow3d: (open: boolean) => void;
+  homePartners?: string[];
+  partnerNames?: Record<string, PartnerName>;
 }) {
   const rows: Array<[string, React.ReactNode, React.ReactNode]> = [
     ['State', a.state_id ?? '—', t.state_id ?? '—'],
@@ -64,6 +124,15 @@ function ComparePanel({
     ['Resolution', a.resolution != null ? `${fmtNum(a.resolution, 2)} Å` : '—', t.resolution != null ? `${fmtNum(t.resolution, 2)} Å` : '—'],
     ['Ligand state', <LigandBadge key="a" status={a.binding_status} />, <LigandBadge key="b" status={t.binding_status} />],
     ['Binders', a.binders.join(' ') || '—', (t.binders ?? []).join(' ') || '—'],
+    ...(homePartners
+      ? ([
+          [
+            'Binding partners',
+            <PartnerChips key="a" keys={homePartners} names={partnerNames} max={4} />,
+            <PartnerChips key="b" keys={t.partners} names={partnerNames} home={homePartners} max={4} />,
+          ],
+        ] as Array<[string, React.ReactNode, React.ReactNode]>)
+      : []),
     ['Assembly', capitalize(a.chain_composition), capitalize(t.chain_composition)],
     ['Released', a.release_date ?? '—', t.release_date ?? '—'],
   ];
@@ -83,7 +152,7 @@ function ComparePanel({
             <Box aria-hidden /> {show3d ? 'Hide structure' : 'View structure'}
           </button>
           <Link to={chainPath(t.pdb_id, t.auth_asym_id)} className="btn btn--ghost btn--sm">
-            Open partner <ArrowRight aria-hidden />
+            Open alternative <ArrowRight aria-hidden />
           </Link>
           <button type="button" className="icon-btn" aria-label="Close comparison" onClick={onClose}>
             <X aria-hidden />
@@ -138,9 +207,9 @@ function ComparePanel({
           </tbody>
         </table>
         <div>
-          <h3 className="compare__sub">Energy change (partner − this chain)</h3>
+          <h3 className="compare__sub">Energy change (alternative − this chain)</h3>
           <DeltaBars delta={t.delta} />
-          <p className="muted small">Negative (green) means the partner conformation scores lower, i.e. more favourable.</p>
+          <p className="muted small">Negative (green) means the alternative conformation scores lower, i.e. more favourable.</p>
         </div>
       </div>
       <OrderChangeView
@@ -257,7 +326,21 @@ export function ChainPage() {
             </Badge>
             <Badge>{methodShort(c.experimental_method)}{c.resolution != null ? ` · ${fmtNum(c.resolution, 2)} Å` : ''}</Badge>
             {c.chain_composition && <Badge>{capitalize(c.chain_composition)}</Badge>}
-            {c.nucleic_acid_binding && c.nucleic_acid_binding !== 'None' && <Badge>Binds {c.nucleic_acid_binding}</Badge>}
+            {(() => {
+              const bound = (c.binding_partners ?? [])
+                .filter((p) => p.biological && !p.same_entity)
+                .sort((x, y) => Number(y.type === 'protein') - Number(x.type === 'protein'));
+              if (!c.binding_partners)
+                return c.nucleic_acid_binding && c.nucleic_acid_binding !== 'None' ? <Badge>Binds {c.nucleic_acid_binding}</Badge> : null;
+              if (!bound.length) return null;
+              const name = polymerName(bound[0].description, bound[0].type, bound[0].entity);
+              return (
+                <Badge title={bound.map((p) => `${polymerName(p.description, p.type, p.entity)} (${p.chain})`).join('\n')}>
+                  Bound to {name.length > 32 ? `${name.slice(0, 31)}…` : name}
+                  {bound.length > 1 ? ` +${bound.length - 1}` : ''}
+                </Badge>
+              );
+            })()}
           </div>
           <div className="entity-head__links">
             <ExternalLink href={`https://www.rcsb.org/structure/${c.pdb_id.toUpperCase()}`}>RCSB PDB</ExternalLink>
@@ -300,13 +383,13 @@ export function ChainPage() {
         title="Alternative conformations"
         kicker={
           tr.data
-            ? `${fmtInt(transitions.length)} other observations of this sequence; ${fmtInt(nCross)} are in a different state. Each point is one partner — click to compare.`
+            ? `${fmtInt(transitions.length)} other observations of this sequence; ${fmtInt(nCross)} are in a different state. Each point is one alternative — click to compare.`
             : 'Loading transitions…'
         }
       >
         {tr.loading && <Spinner label="Loading transitions…" />}
         {tr.error && <ErrorState message={tr.error.message} />}
-        {tr.data && transitions.length === 0 && <EmptyState title="No partner observations" />}
+        {tr.data && transitions.length === 0 && <EmptyState title="No alternatives" />}
         {tr.data && transitions.length > 0 && (
           <div className="neighbourhood">
             <TransitionScatter
@@ -364,11 +447,13 @@ export function ChainPage() {
           onClose={() => setSelected(null)}
           show3d={compare3d}
           onShow3d={setCompare3d}
+          homePartners={tr.data?.partners}
+          partnerNames={tr.data?.partner_names}
         />
       )}
 
       {tr.data && transitions.length > 0 && (
-        <Section title="Transitions" kicker="Energy deltas are partner − this chain; sort any column." flush>
+        <Section title="Transitions" kicker="Energy deltas are alternative − this chain; sort any column." flush>
           <TransitionsTable
             items={transitions}
             homeState={homeState}
@@ -385,11 +470,41 @@ export function ChainPage() {
             }}
             scope={scope}
             onScope={setScope}
+            homePartners={tr.data?.partners}
+            partnerNames={tr.data?.partner_names}
           />
         </Section>
       )}
 
-      <div className="grid-2">
+      <Section
+        title="Interactions"
+        kicker={`What ${label} interacts with in ${c.pdb_id.toUpperCase()}: small molecules on this chain, and protein, DNA or RNA chains within 4.5 Å of it.`}
+      >
+        <BindingSummary c={c} />
+        <h3 className="binding__sub">
+          Small molecules <span>ligands, metals and cofactors on this chain</span>
+        </h3>
+        {c.binders.length > 0 ? (
+          <div className="binders">
+            {c.binders.map((b) => (
+              <Binder key={b} id={b} />
+            ))}
+          </div>
+        ) : (
+          <p className="muted small">No ligands, metals or cofactors on this chain (apo).</p>
+        )}
+        {c.binding_partners && (
+          <>
+            <h3 className="binding__sub">
+              Macromolecules{' '}
+              <span>bound partners need ≥ 5 interface residues and must be in biological assembly 1; the rest are crystal or marginal contacts</span>
+            </h3>
+            <BindingPartners partners={c.binding_partners} pdb={c.pdb_id} length={c.sequence_length ?? c.sequence.length} />
+          </>
+        )}
+      </Section>
+
+      <div className="masonry">
         <Section title="Identifiers & domains" kicker="Cross-references for this chain; every identifier links out.">
           <DomainList
             uniprot={c.uniprot_id}
@@ -403,42 +518,6 @@ export function ChainPage() {
             pfamIds={c.pfam_ids}
           />
         </Section>
-        <Section
-          title="Binders & context"
-          kicker="Binders are small molecules on this chain; nucleic acid and assembly describe the whole PDB entry."
-        >
-          <dl className="facts">
-            <Fact label="Small-molecule binders (this chain)">
-              {c.binders.length ? `${c.binders.length}` : 'None'}
-            </Fact>
-            <Fact label="Apo / holo" hint="Holo = at least one small-molecule binder on this chain; DNA/RNA are not counted">
-              <span className="fact-note">
-                <LigandBadge status={c.binding_status} />
-                <small className="muted">by small molecules only</small>
-              </span>
-            </Fact>
-            <Fact label="Nucleic acid in entry" hint="Non-protein polymer present anywhere in the PDB entry, not necessarily bound to this chain">
-              {c.nucleic_acid_binding && c.nucleic_acid_binding !== 'None' ? c.nucleic_acid_binding : 'None'}
-            </Fact>
-            <Fact label="Assembly (entry)" hint="Protein chain composition of the PDB entry">
-              {capitalize(c.chain_composition)}
-            </Fact>
-          </dl>
-          {c.binders.length > 0 ? (
-            <div className="binders">
-              {c.binders.map((b) => (
-                <Binder key={b} id={b} />
-              ))}
-            </div>
-          ) : (
-            <p className="muted small" style={{ marginTop: 12 }}>
-              No ligands, metals or cofactors on this chain.
-            </p>
-          )}
-        </Section>
-      </div>
-
-      <div className="grid-2">
         <Section title="Experiment">
           <dl className="facts">
             <Fact label="Method">{c.experimental_method ? capitalize(c.experimental_method.toLowerCase()) : '—'}</Fact>
@@ -464,9 +543,6 @@ export function ChainPage() {
             </Fact>
           </dl>
         </Section>
-      </div>
-
-      <div className="grid-2">
         <Section title="Ranked functions" kicker="Functional annotations ranked by matching score for this observation.">
           <FunctionList functions={c.functions} />
         </Section>
@@ -492,7 +568,7 @@ export function ChainPage() {
       </div>
 
       <p className="muted small page-foot-note">
-        Other chains of this entry: <Link to={`/search?q=${c.pdb_id}`}>{c.pdb_id.toUpperCase()}</Link>. Partner links open
+        Other chains of this entry: <Link to={`/search?q=${c.pdb_id}`}>{c.pdb_id.toUpperCase()}</Link>. Chain links open
         each observation; <ChainLink pdb={c.pdb_id} chain={c.auth_asym_id} /> is this page.
       </p>
     </div>

frontend/src/pages/HomePage.tsx

@@ -302,7 +302,7 @@ export function HomePage() {
           <div className="cta__text">
             <h2>Take the whole database with you</h2>
             <p>
-              One SQLite file with two tables — <code>node</code> (observations) and <code>edge</code> (transitions). Query
+              One SQLite file with three tables — <code>node</code> (observations), <code>edge</code> (transitions) and <code>partner</code> (binding partners). Query
               it with any SQLite client, pandas or DuckDB.
             </p>
           </div>

frontend/src/pages/SequencePage.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { api, type Member } from '../lib/api';
+import { api, type Member, type PartnerName } from '../lib/api';
 import { useApi } from '../lib/hooks';
 import { cleanFunction, fmtInt, fmtNum, fmtPct, methodShort, capitalize } from '../lib/format';
 import { ChainLink, EmptyState, ErrorState, ExternalLink, LigandBadge, Pagination, Section, Segmented, Spinner, Meter, UniProtLinks } from '../components/ui';
@@ -8,12 +8,25 @@ import { StateHeatmap, StateLandscape } from '../components/StateViews';
 import { FunctionList, SequenceTrack } from '../components/Panels';
 import { PageMeta } from '../components/PageMeta';
 import { DomainList } from '../components/Domains';
+import { NO_PARTNER, PartnerChips, PartnersByState, partnerLabel } from '../components/Partners';
 
 const PAGE = 25;
 
 type MemberSort = 'state' | 'resolution' | 'date' | 'coverage';
 
-function MembersTable({ members, state }: { members: Member[]; state: number | null }) {
+function MembersTable({
+  members,
+  state,
+  partner,
+  names,
+  onClearPartner,
+}: {
+  members: Member[];
+  state: number | null;
+  partner: string | null;
+  names?: Record<string, PartnerName>;
+  onClearPartner: () => void;
+}) {
   const [ligand, setLigand] = useState<'all' | 'apo' | 'holo'>('all');
   const [sort, setSort] = useState<MemberSort>('state');
   const [page, setPage] = useState(0);
@@ -21,6 +34,8 @@ function MembersTable({ members, state }: { members: Member[]; state: number | n
   const rows = useMemo(() => {
     let r = members;
     if (state != null) r = r.filter((m) => m.state_id === state);
+    if (partner != null)
+      r = r.filter((m) => (partner === NO_PARTNER ? !m.partners?.length : m.partners?.includes(partner)));
     if (ligand !== 'all') r = r.filter((m) => m.binding_status === ligand);
     const cmp: Record<MemberSort, (a: Member, b: Member) => number> = {
       state: (a, b) => a.state_id - b.state_id || (a.resolution ?? 99) - (b.resolution ?? 99),
@@ -29,10 +44,14 @@ function MembersTable({ members, state }: { members: Member[]; state: number | n
       coverage: (a, b) => (b.resolved_coverage ?? 0) - (a.resolved_coverage ?? 0),
     };
     return [...r].sort(cmp[sort]);
-  }, [members, state, ligand, sort]);
+  }, [members, state, partner, ligand, sort]);
 
   const pageRows = rows.slice(page * PAGE, (page + 1) * PAGE);
-  const scoped = state != null ? members.filter((m) => m.state_id === state) : members;
+  const scoped = members.filter(
+    (m) =>
+      (state == null || m.state_id === state) &&
+      (partner == null || (partner === NO_PARTNER ? !m.partners?.length : m.partners?.includes(partner))),
+  );
   const nHolo = scoped.filter((m) => m.binding_status === 'holo').length;
 
   return (
@@ -60,6 +79,11 @@ function MembersTable({ members, state }: { members: Member[]; state: number | n
             <option value="coverage">Coverage</option>
           </select>
         </label>
+        {partner != null && (
+          <button type="button" className="btn btn--ghost btn--sm" onClick={onClearPartner}>
+            Partner: {partnerLabel(partner, names)} ✕
+          </button>
+        )}
       </div>
       {rows.length === 0 ? (
         <EmptyState title="No observations match" />
@@ -74,6 +98,7 @@ function MembersTable({ members, state }: { members: Member[]; state: number | n
                 <th className="num">Res. (Å)</th>
                 <th>Ligand</th>
                 <th>Binders</th>
+                <th>Binding partners</th>
                 <th>Assembly</th>
                 <th>Modelled</th>
                 <th className="num">Released</th>
@@ -94,6 +119,9 @@ function MembersTable({ members, state }: { members: Member[]; state: number | n
                   <td className="mono binders-cell" title={m.binders.join(', ')}>
                     {m.binders.length ? m.binders.slice(0, 4).join(' ') + (m.binders.length > 4 ? ` +${m.binders.length - 4}` : '') : '—'}
                   </td>
+                  <td>
+                    <PartnerChips keys={m.partners} names={names} />
+                  </td>
                   <td>{capitalize(m.chain_composition)}</td>
                   <td>
                     <span className="meter-cell">
@@ -117,6 +145,7 @@ export function SequencePage() {
   const { id = '' } = useParams();
   const res = useApi(`sequence:${id}`, (sig) => api.sequence(id, sig));
   const [selected, setSelected] = useState<number | null>(null);
+  const [partner, setPartner] = useState<string | null>(null);
   const s = res.data;
 
   if (res.loading) return <div className="page"><Spinner label="Loading sequence…" /></div>;
@@ -229,15 +258,38 @@ export function SequencePage() {
         )}
       </div>
 
+      {s.partner_names && (
+        <Section
+          title="Binding partners by state"
+          kicker="Observations per state bound to each protein, DNA or RNA partner (in biological assembly 1, ≥ 5 interface residues). Click a partner or state to filter the observations below."
+        >
+          <PartnersByState
+            members={s.members}
+            states={s.states}
+            names={s.partner_names}
+            selectedState={selected}
+            onSelectState={setSelected}
+            selectedPartner={partner}
+            onSelectPartner={setPartner}
+          />
+        </Section>
+      )}
+
       <Section
         title={selected != null ? `Observations in state ${selected}` : 'All observations'}
         kicker="Open a chain to see its transitions to every other observation."
         flush
       >
-        <MembersTable members={s.members} state={selected} />
+        <MembersTable
+          members={s.members}
+          state={selected}
+          partner={partner}
+          names={s.partner_names}
+          onClearPartner={() => setPartner(null)}
+        />
       </Section>
 
-      <div className="grid-2">
+      <div className="masonry">
         <Section
           title="Identifiers & domains"
           kicker="Consensus assignments across this sequence's chains; per-chain domain IDs are on each chain page."
@@ -259,17 +311,17 @@ export function SequencePage() {
             </Link>
           )}
         </Section>
+        <Section title="Sequence" kicker={`${fmtInt(s.length)} residues (SEQRES)`}>
+          <SequenceTrack
+            sequence={s.sequence ?? ''}
+            fastaHeader={`${s.sequence_id}${s.uniprot_id ? ` ${s.uniprot_id}` : ''}`}
+            fileName={`${s.sequence_id}.fasta`}
+          />
+        </Section>
         <Section title="Ranked functions" kicker={`From the representative chain ${s.rep_pdb.toUpperCase()}.${s.rep_chain}`}>
           <FunctionList functions={s.functions ?? []} />
         </Section>
       </div>
-      <Section title="Sequence" kicker={`${fmtInt(s.length)} residues (SEQRES)`}>
-        <SequenceTrack
-          sequence={s.sequence ?? ''}
-          fastaHeader={`${s.sequence_id}${s.uniprot_id ? ` ${s.uniprot_id}` : ''}`}
-          fileName={`${s.sequence_id}.fasta`}
-        />
-      </Section>
     </div>
   );
 }

frontend/src/pages/StatisticsPage.tsx

@@ -234,6 +234,63 @@ export function StatisticsPage() {
             </>
           )}
 
+          {o.partners && (
+            <>
+              <h2 className="section-title">Binding partners</h2>
+              <div className="chart-grid">
+                <ChartCard
+                  title="Partners of each observation"
+                  kicker="Protein, DNA or RNA chains within 4.5 Å with ≥ 5 interface residues, in biological assembly 1. Crystal contacts are excluded."
+                >
+                  <StackedBar
+                    height={16}
+                    parts={[
+                      { key: 'hetero', label: 'Bound to another polymer', value: o.partners.observations_with_hetero_partner, color: 'var(--accent)' },
+                      { key: 'homo', label: 'Homo-oligomer contacts only', value: o.partners.observations_homo_only, color: 'var(--fid-identical)' },
+                      {
+                        key: 'none',
+                        label: 'No polymer partner',
+                        value: o.counts.observations - o.partners.observations_with_partner,
+                        color: 'var(--apo)',
+                      },
+                    ]}
+                  />
+                  <h3 className="mini-title">Observations by partner type (hetero partners)</h3>
+                  <BarList
+                    items={o.partners.by_type.map((t) => ({
+                      key: t.label,
+                      label: ({ protein: 'Protein', dna: 'DNA', rna: 'RNA', hybrid: 'DNA/RNA hybrid' } as Record<string, string>)[t.label] ?? t.label,
+                      value: t.value,
+                    }))}
+                  />
+                  <p className="muted small">{fmtInt(o.partners.distinct_partners)} distinct partners (UniProt accessions or named polymers).</p>
+                </ChartCard>
+                <ChartCard
+                  title="Most frequent protein partners"
+                  kicker="Observations bound to each protein (by UniProt accession), excluding homo-oligomer contacts."
+                >
+                  <div className="barlist--wide">
+                    <BarList
+                      items={o.partners.top
+                        .filter((t) => t.type === 'protein')
+                        .slice(0, 15)
+                        .map((t) => ({
+                          key: t.key,
+                          label: (
+                            <span title={`${t.label}${t.uniprot ? ` (${t.uniprot})` : ''}`}>
+                              {t.label}
+                              {t.uniprot && <span className="muted mono small"> {t.uniprot}</span>}
+                            </span>
+                          ),
+                          value: t.value,
+                        }))}
+                    />
+                  </div>
+                </ChartCard>
+              </div>
+            </>
+          )}
+
           <h2 className="section-title">Observations</h2>
           <div className="chart-grid">
             <ChartCard title="Experimental method">

frontend/src/styles/pages.css

@@ -2081,3 +2081,292 @@
 .order-legend {
   margin: -8px 0 6px;
 }
+
+/* ───────────────────────── binding partners */
+.pchips {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.pchip {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  white-space: nowrap;
+  background: var(--surface-2);
+  color: var(--ink-2);
+  border: 1px solid var(--line);
+}
+
+.pchip--self {
+  background: transparent;
+  color: var(--muted);
+  border-style: dashed;
+}
+
+.pchip--protein {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  border-color: transparent;
+}
+
+.pchip--dna,
+.pchip--rna,
+.pchip--hybrid {
+  background: color-mix(in srgb, var(--holo) 14%, transparent);
+  color: var(--ink);
+  border-color: transparent;
+}
+
+.pchip.is-gained {
+  box-shadow: inset 0 0 0 1.5px var(--accent);
+  font-weight: 600;
+}
+
+.pchip--more {
+  background: transparent;
+}
+
+.pchip--lost {
+  background: transparent;
+  color: var(--pos);
+  border-color: color-mix(in srgb, var(--pos) 40%, transparent);
+}
+
+.partner-name {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.partner-name__text {
+  font-weight: 550;
+  color: var(--ink);
+}
+
+.partner-name__ids {
+  display: flex;
+  gap: 10px;
+  margin-top: 2px;
+  font-size: 12px;
+}
+
+.ptype {
+  font-size: 10.5px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  white-space: nowrap;
+}
+
+.ptype--dna,
+.ptype--rna,
+.ptype--hybrid {
+  background: color-mix(in srgb, var(--holo) 16%, transparent);
+  color: var(--ink);
+}
+
+.ptype-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  flex: none;
+  background: var(--accent);
+}
+
+.ptype-dot--self {
+  background: transparent;
+  border: 1.5px dashed var(--muted);
+}
+
+.ptype-dot--dna,
+.ptype-dot--rna,
+.ptype-dot--hybrid {
+  background: var(--holo);
+}
+
+.pkind {
+  font-size: 12px;
+  font-weight: 550;
+  white-space: nowrap;
+}
+
+.pkind--bio {
+  color: var(--accent-strong);
+}
+
+.pkind--homo {
+  color: var(--ink-2);
+}
+
+.pkind--weak {
+  color: var(--faint);
+}
+
+tr.is-dim td {
+  color: var(--muted);
+}
+
+.istrip {
+  position: relative;
+  display: block;
+  min-width: 220px;
+  height: 12px;
+  border-radius: 3px;
+  background: var(--surface-3);
+  overflow: hidden;
+}
+
+.istrip__seg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--accent);
+}
+
+tr.is-dim .istrip__seg {
+  background: var(--faint);
+}
+
+.partners-toggle {
+  margin-top: 10px;
+}
+
+.pmatrix-wrap {
+  overflow-x: auto;
+}
+
+.pmatrix {
+  border-collapse: separate;
+  border-spacing: 2px;
+  font-size: 12.5px;
+}
+
+.pmatrix th {
+  font-weight: 550;
+  color: var(--muted);
+  text-align: center;
+}
+
+.pmatrix tbody th {
+  text-align: left;
+}
+
+.pmatrix__corner {
+  text-align: left !important;
+  font-size: 11.5px;
+}
+
+.pmatrix__partner,
+.pmatrix__state {
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: var(--ink-2);
+  cursor: pointer;
+  padding: 3px 6px;
+  border-radius: 6px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pmatrix__partner:hover,
+.pmatrix__state:hover {
+  background: var(--surface-2);
+}
+
+.pmatrix__partner.is-on,
+.pmatrix__state.is-on {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 650;
+}
+
+.pmatrix__cell {
+  min-width: 34px;
+  height: 26px;
+  text-align: center;
+  border-radius: 4px;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+
+.seq-bg-0 { background: var(--surface-2); }
+.seq-bg-1 { background: var(--seq-1); }
+.seq-bg-2 { background: var(--seq-2); }
+.seq-bg-3 { background: var(--seq-3); color: #fff; }
+.seq-bg-4 { background: var(--seq-4); color: #fff; }
+.seq-bg-5 { background: var(--seq-5); color: #fff; }
+
+.pmatrix__label {
+  display: inline-block;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+.pmatrix__acc {
+  margin-left: 6px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.barlist--wide .barlist__row {
+  grid-template-columns: minmax(120px, 260px) minmax(0, 1fr) auto;
+}
+
+.binding__summary {
+  margin-top: 4px;
+}
+
+.binding__text {
+  font-size: 15px !important;
+}
+
+.binding__sub {
+  margin: 22px 0 10px;
+  font-size: 14px;
+  font-weight: 650;
+  color: var(--ink);
+}
+
+.binding__sub span {
+  margin-left: 8px;
+  font-size: 12.5px;
+  font-weight: 400;
+  color: var(--muted);
+}
+
+/* Two-column card flow: each column stacks independently, so a short card does
+   not leave a gap beside a tall one. */
+.masonry {
+  columns: 2;
+  column-gap: 20px;
+  margin-bottom: -20px;
+}
+
+.masonry > * {
+  break-inside: avoid;
+  margin: 0 0 20px;
+  display: block;
+  width: 100%;
+}
+
+@media (max-width: 800px) {
+  .masonry {
+    columns: 1;
+  }
+}