bindsight 0.3.5__py3-none-any.whl

bindsight/report/web/static/binder_viewer.js

@@ -0,0 +1,245 @@
+// SPDX-FileCopyrightText: 2026 Mikhaeel Atef Rizk Wahba
+// SPDX-License-Identifier: AGPL-3.0-or-later
+//
+// The predicted binder-target complexes, drawn in 3-D.
+//
+// This file is loaded by three surfaces and authored once, because copies of a
+// viewer diverge and the copy nobody is looking at is the one that drifts:
+//
+//   `bindsight ui`         templates/evidence.html.j2, structures from a route
+//   the documentation site docs/results.md, structures from files beside it
+//   the HTML report        report/templates/report.html.j2, structures inside it
+//
+// None of them owns it. What differs is only where a structure comes from, and
+// that is read off the host element rather than branched on by surface.
+//
+// The host element carries the contract:
+//
+//   data-binder-viewer                  marks the element to draw into
+//   data-structure-url="<template>"     {id} is replaced with the design id
+//   data-viewer-lib="<url>"             optional: load 3Dmol from here if absent
+//
+// and, where the page carries its structures rather than fetching them,
+// `window.BINDSIGHT_STRUCTURES` maps design id to mmCIF text.
+//
+// and the picker carries `data-binder-picker`. Attributes, not ids, so the two
+// surfaces can keep their own class names and their own stylesheets.
+(function () {
+  "use strict";
+
+  // Captured at parse time: `document.currentScript` is null inside any later
+  // callback. Every URL below resolves against THIS FILE's location rather than
+  // the page's, which is what lets one script serve a docs site published under
+  // a subpath (/bindsight/), a local `mkdocs serve` at /, and the app at / --
+  // with nothing encoding a site root. mkdocs-material has already put the
+  // correct base on this src; borrowing it is more reliable than deriving it.
+  var SELF =
+    (document.currentScript && document.currentScript.src) ||
+    (document.querySelector('script[src*="binder_viewer.js"]') || {}).src ||
+    window.location.href;
+  var HERE = new URL(".", SELF).href;
+
+  // bindsight writes the designed chain as B and the target it was designed
+  // against as T. tests/test_web_ui.py asserts that of every committed
+  // structure, so if it ever stops being true this stops being a silent
+  // mis-colouring and becomes a failing test.
+  var BINDER_CHAIN = "B";
+
+  // Composed as nodes rather than markup, for the reason the fetch handler
+  // below gives: a message that later starts carrying something a server said
+  // must not be interpolated into innerHTML.
+  function replaceViewerWith(host, text) {
+    host.innerHTML = "";
+    var note = document.createElement("p");
+    note.className = "small";
+    note.style.padding = "1rem";
+    // Announced, not just drawn: this replaces a fallback that a screen
+    // reader had already been given, so losing the role would make the
+    // message silent for exactly the reader who needs it most.
+    note.setAttribute("role", "alert");
+    note.textContent = text;
+    var where = document.createElement("p");
+    where.className = "small muted";
+    where.style.padding = "0 1rem 1rem";
+    where.textContent =
+      "Every complex is committed as mmCIF under " +
+      "benchmarks/designer_benchmark/, which is the file this viewer reads.";
+    host.appendChild(note);
+    host.appendChild(where);
+  }
+
+  // WebGL is unavailable in more places than it looks: locked-down machines,
+  // remote desktops, some VMs, browsers with hardware acceleration off. There
+  // `createViewer` does not throw -- it returns a viewer over a canvas with a
+  // dead context, so the page drew a white rectangle under a caption promising
+  // a rotatable complex and said nothing. The rule is the one the fetch
+  // handler below states: a blank viewer and a design that produced nothing
+  // are different facts and must not look the same.
+  function webglAvailable() {
+    try {
+      var probe = document.createElement("canvas");
+      return !!(probe.getContext("webgl2") || probe.getContext("webgl"));
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function start(host, pick) {
+    if (!webglAvailable()) {
+      replaceViewerWith(
+        host,
+        "This browser cannot draw 3-D structures: WebGL is unavailable or " +
+          "switched off. The structures are here, the viewer is not."
+      );
+      return;
+    }
+
+    host.innerHTML = "";
+    var viewer;
+    try {
+      viewer = $3Dmol.createViewer(host, { backgroundColor: "white" });
+    } catch (e) {
+      replaceViewerWith(host, "Could not start the structure viewer: " + String(e && e.message));
+      return;
+    }
+    if (!viewer) {
+      replaceViewerWith(host, "Could not start the structure viewer.");
+      return;
+    }
+
+    // The app serves structures from a route; the docs site serves them as
+    // files beside this script. The id is never user input -- it comes from
+    // the picker this page generated -- and encodeURIComponent keeps a
+    // crafted one from walking out of the directory either way.
+    var template = host.getAttribute("data-structure-url") || "/api/structure/{id}";
+
+    // The self-contained HTML report has no server AND no sibling files: it
+    // is one file that must survive being emailed, so its structures travel
+    // inside it. Same viewer, third source -- rather than a second viewer that
+    // would be the copy nobody noticed had drifted.
+    var inline = window.BINDSIGHT_STRUCTURES || null;
+
+    function load(id) {
+      if (inline && Object.prototype.hasOwnProperty.call(inline, id)) {
+        return Promise.resolve(inline[id]);
+      }
+      var url = new URL(template.replace("{id}", encodeURIComponent(id)), HERE).href;
+      return fetch(url).then(function (r) {
+        if (!r.ok) throw new Error("no structure for " + id);
+        return r.text();
+      });
+    }
+
+    // Which selection is allowed to draw. A reader clicking through the picker
+    // has several loads in flight, and they do not resolve in the order they
+    // were asked for -- so the slowest would win and the viewer would show a
+    // complex the picker is no longer naming, with nothing on screen to say so.
+    var latestPick = 0;
+
+    function show(id) {
+      var thisPick = ++latestPick;
+      load(id)
+        .then(function (cif) {
+          if (thisPick !== latestPick) return;
+          viewer.clear();
+          var model = viewer.addModel(cif, "cif");
+          // An mmCIF the parser did not understand yields a model with no atoms,
+          // and 3Dmol renders that as an empty canvas without complaint -- the
+          // same white rectangle a reader would get from a design that produced
+          // nothing. Counted rather than assumed, for the reason the catch block
+          // below gives.
+          var atoms = 0;
+          try {
+            atoms = model && model.selectedAtoms ? model.selectedAtoms({}).length : 0;
+          } catch (e) {
+            atoms = 0;
+          }
+          if (!atoms) {
+            throw new Error("the structure file for " + id + " parsed to no atoms");
+          }
+          // Paint everything first, then override the binder. Styling named
+          // chains only meant a file whose chains are named something else kept
+          // 3Dmol's default line style and rendered as a wireframe haze -- with
+          // no error, and under a caption claiming it was grey cartoon.
+          viewer.setStyle({}, { cartoon: { color: "#9aa5b1" } });
+          viewer.setStyle({ chain: BINDER_CHAIN }, { cartoon: { color: "#0f7d73" } });
+          viewer.zoomTo();
+          viewer.render();
+        })
+        .catch(function (err) {
+          if (thisPick !== latestPick) return;
+          // Said plainly. A viewer that stays blank is indistinguishable from a
+          // design that produced nothing, and those are different facts.
+          //
+          // Built as a node with textContent rather than assembled into
+          // innerHTML. The message is composed here today, but an error string
+          // is exactly the kind of value that later starts carrying something a
+          // server said, and by then the interpolation looks harmless.
+          //
+          // One case this reports honestly rather than hiding: opening the
+          // built site from a file:// path, where fetch is refused by CORS.
+          host.innerHTML = "";
+          var note = document.createElement("p");
+          note.className = "small";
+          note.style.padding = "1rem";
+          note.setAttribute("role", "alert");
+          note.textContent = "Could not load this structure: " + String(err && err.message);
+          host.appendChild(note);
+        });
+    }
+
+    pick.addEventListener("change", function () {
+      show(pick.value);
+    });
+    show(pick.value);
+  }
+
+  function boot() {
+    var host = document.querySelector("[data-binder-viewer]");
+    var pick = document.querySelector("[data-binder-picker]");
+    if (!host || !pick) return;
+    // mkdocs-material's instant navigation swaps page content without a
+    // reload, so this runs again on a page that may already be wired up.
+    if (host.dataset.viewerReady === "1") return;
+    host.dataset.viewerReady = "1";
+
+    if (typeof $3Dmol !== "undefined") {
+      start(host, pick);
+      return;
+    }
+
+    // The app loads the library itself, in a tag beside this one. The docs
+    // page cannot: `extra_javascript` would put half a megabyte on all eight
+    // pages to serve the one that draws structures. So it names the library
+    // here and it is fetched only where a viewer exists.
+    var lib = host.getAttribute("data-viewer-lib");
+    if (!lib) {
+      // The app and the report both ship the library in a tag beside this one,
+      // so reaching here without one means it failed to parse or was stripped.
+      replaceViewerWith(host, "The structure viewer library did not load.");
+      return;
+    }
+    var tag = document.createElement("script");
+    tag.src = new URL(lib, HERE).href;
+    tag.onload = function () {
+      start(host, pick);
+    };
+    tag.onerror = function () {
+      // A 404 on the library would otherwise leave the bare host element on
+      // screen: a blank rectangle under a caption promising a complex.
+      replaceViewerWith(host, "Could not load the structure viewer.");
+    };
+    document.head.appendChild(tag);
+  }
+
+  // mkdocs-material publishes `document$` and re-emits it on every instant
+  // navigation; without subscribing, a reader arriving at this page from
+  // another docs page gets an inert picker and an empty box.
+  if (window.document$ && typeof window.document$.subscribe === "function") {
+    window.document$.subscribe(boot);
+  } else if (document.readyState !== "loading") {
+    boot();
+  } else {
+    document.addEventListener("DOMContentLoaded", boot);
+  }
+})();

bindsight/report/web/static/bindsight.css

@@ -0,0 +1,455 @@
+/* SPDX-FileCopyrightText: 2026 Mikhaeel Atef Rizk Wahba
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * bindsight design system.
+ *
+ * One stylesheet, two surfaces: the interactive app and the standalone HTML
+ * report a collaborator opens from an email. They looked like different
+ * products before; a reader who has seen one should recognise the other.
+ *
+ * Three rules this file exists to enforce, because they are scientific claims
+ * and not decoration:
+ *
+ *   1. A figure never appears without what makes it interpretable. `.stat`
+ *      requires a denominator or interval slot; there is no variant without one.
+ *   2. Nothing is encoded by colour alone. Every status carries a glyph, so the
+ *      meaning survives a projector, a greyscale printout, and deuteranopia.
+ *   3. Absence renders as an em dash, never as zero. `.stat--absent` exists so
+ *      "not measured" cannot be mistaken for "measured as none".
+ */
+
+/* ---------------------------------------------------------------- tokens */
+:root {
+  /* Ink and ground. Deliberately not pure black on pure white: 1b1f24 on
+     fcfdfe is easier to read for long stretches and still clears WCAG AAA. */
+  --ink: #1b1f24;
+  --ink-soft: #55606d;
+  /* 4.9:1 on the page background. Was #7d8896, which is 3.6:1 -- below WCAG
+     AA's 4.5:1 for text under 18.7px, and every `.stat__label` and
+     `.stat__note` is 12px. That put the words naming each headline number, and
+     the caveats attached to them, below the threshold while the numbers
+     themselves stayed legible: exactly backwards for a design whose rule is
+     that the limitation sits beside the claim. */
+  --ink-faint: #68727f;
+  --ground: #fcfdfe;
+  --surface: #ffffff;
+  --rule: #e3e6ea;
+  --rule-strong: #c9d2de;
+
+  /* Brand. Navy carries structure; teal marks the designed half. */
+  --navy: #0b5394;
+  --navy-deep: #073a68;
+  --navy-tint: #e8f0fb;
+  --teal: #0e766d;
+  --teal-tint: #e6f4f2;
+
+  /* Status. Each is paired with a glyph in the markup — never used alone. */
+  --ok: #1f6f35;
+  --ok-tint: #e8f4ea;
+  --warn: #8a6100;
+  --warn-tint: #fdf3dd;
+  --err: #a32020;
+  --err-tint: #fbeaea;
+
+  /* Type scale, 1.2 ratio from 16px. */
+  --t-xs: 0.75rem;
+  --t-sm: 0.875rem;
+  --t-base: 1rem;
+  --t-md: 1.2rem;
+  --t-lg: 1.44rem;
+  --t-xl: 1.728rem;
+  --t-2xl: 2.074rem;
+
+  /* Spacing, 4px base. */
+  --s-1: 0.25rem;
+  --s-2: 0.5rem;
+  --s-3: 0.75rem;
+  --s-4: 1rem;
+  --s-6: 1.5rem;
+  --s-8: 2rem;
+  --s-12: 3rem;
+  --s-16: 4rem;
+
+  --radius: 8px;
+  --radius-sm: 4px;
+  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
+  --measure: 68ch;
+
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  font-family: var(--font);
+  font-size: var(--t-base);
+  line-height: 1.6;
+  color: var(--ink);
+  background: var(--ground);
+  /* Tabular figures everywhere: a column of numbers that does not align is a
+     column a reader cannot scan. */
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------------------------------------------------------------- layout */
+.shell { display: flex; min-height: 100vh; }
+
+.sidebar {
+  flex: 0 0 15rem;
+  background: var(--navy-deep);
+  color: #dce7f3;
+  padding: var(--s-6) var(--s-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-6);
+}
+.sidebar a { color: #dce7f3; }
+
+.brand { display: block; text-decoration: none; }
+.brand__name {
+  font-size: var(--t-lg);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: #fff;
+}
+.brand__tag { font-size: var(--t-xs); color: #9fb8d4; }
+
+.nav { display: flex; flex-direction: column; gap: 2px; }
+.nav a {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--radius-sm);
+  text-decoration: none;
+  font-size: var(--t-sm);
+}
+.nav a:hover { background: rgba(255, 255, 255, 0.08); }
+.nav a[aria-current="page"] {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  font-weight: 600;
+}
+/* Not colour alone: the current page also carries a marker. */
+.nav a[aria-current="page"]::before { content: "▸"; margin-left: -0.75em; }
+
+.sidebar__foot {
+  margin-top: auto;
+  font-size: var(--t-xs);
+  color: #9fb8d4;
+  line-height: 1.5;
+}
+
+.main { flex: 1 1 auto; min-width: 0; }
+.wrap { max-width: 78rem; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-16); }
+.prose { max-width: var(--measure); }
+
+/* ------------------------------------------------------------ typography */
+h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 var(--s-3); }
+h1 { font-size: var(--t-2xl); font-weight: 700; }
+h2 { font-size: var(--t-xl); font-weight: 650; margin-top: var(--s-12); }
+h3 { font-size: var(--t-md); font-weight: 650; margin-top: var(--s-8); }
+h2:first-of-type, h3:first-of-type { margin-top: 0; }
+p { margin: 0 0 var(--s-4); }
+.lede { font-size: var(--t-md); color: var(--ink-soft); max-width: var(--measure); }
+.muted { color: var(--ink-soft); }
+.small { font-size: var(--t-sm); }
+code, kbd, samp { font-family: var(--mono); font-size: 0.9em; }
+:not(pre) > code {
+  background: var(--navy-tint);
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-sm);
+}
+pre {
+  background: #0f1720;
+  color: #e6edf3;
+  padding: var(--s-4);
+  border-radius: var(--radius);
+  overflow-x: auto;
+  font-size: var(--t-sm);
+  line-height: 1.55;
+}
+pre code { background: none; padding: 0; color: inherit; }
+a { color: var(--navy); text-underline-offset: 2px; }
+a:hover { color: var(--navy-deep); }
+
+/* ----------------------------------------------------------------- cards */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  padding: var(--s-6);
+  box-shadow: var(--shadow);
+}
+.card + .card { margin-top: var(--s-4); }
+.card__title { font-size: var(--t-md); font-weight: 650; margin: 0 0 var(--s-2); }
+
+.grid { display: grid; gap: var(--s-4); }
+.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
+.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
+.grid--4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
+
+/* ----------------------------------------------------------------- stats
+ *
+ * The central component, and the one with a rule attached: a `.stat` must
+ * carry a `.stat__of` (its denominator) or a `.stat__ci` (its interval). The
+ * old interface put intervals in hover tooltips — including one spanning
+ * 15–70% — under a paragraph promising every rate carried its interval. A
+ * tooltip is not a disclosure: it does not print, does not exist on touch, and
+ * is not there when someone photographs the screen.
+ */
+.stat { display: flex; flex-direction: column; gap: 2px; }
+.stat__label {
+  font-size: var(--t-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-faint);
+  font-weight: 600;
+}
+.stat__value {
+  font-size: var(--t-xl);
+  font-weight: 680;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+.stat__of { font-size: var(--t-sm); color: var(--ink-soft); }
+.stat__ci { font-size: var(--t-sm); color: var(--ink-soft); }
+.stat__note { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.45; }
+
+/* Absence. Never a zero: four crisp zeros in metric chrome read as a
+   measurement, and a broken run then looks like an empty one. */
+.stat--absent .stat__value { color: var(--ink-faint); font-weight: 500; }
+
+/* Descriptive key/value, deliberately *not* `.stat`.
+ *
+ * `.stat` is a measurement and carries a rule: it must have a denominator or an
+ * interval. Descriptions have neither and never will, so they get their own
+ * component -- otherwise the rule would have to admit exceptions, and a rule
+ * with exceptions cannot be checked. */
+.fact { display: flex; flex-direction: column; gap: 2px; }
+.fact__label {
+  font-size: var(--t-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-faint);
+  font-weight: 600;
+}
+.fact__value { font-size: var(--t-base); font-weight: 600; line-height: 1.4; }
+
+/* ---------------------------------------------------------------- badges */
+.badge {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.35em;
+  padding: 0.15em 0.55em;
+  border-radius: 999px;
+  font-size: var(--t-xs);
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+.badge__glyph { font-weight: 700; }
+.badge--ok { background: var(--ok-tint); color: var(--ok); border-color: #bfe0c7; }
+.badge--warn { background: var(--warn-tint); color: var(--warn); border-color: #ecd9a4; }
+.badge--err { background: var(--err-tint); color: var(--err); border-color: #eebcbc; }
+.badge--info { background: var(--navy-tint); color: var(--navy); border-color: #c3d8f0; }
+.badge--teal { background: var(--teal-tint); color: var(--teal); border-color: #b7ded8; }
+
+/* ---------------------------------------------------------------- notices */
+.note {
+  display: flex;
+  gap: var(--s-3);
+  padding: var(--s-4);
+  border-radius: var(--radius);
+  border: 1px solid var(--rule);
+  background: var(--surface);
+  margin: var(--s-4) 0;
+}
+.note__glyph { flex: 0 0 auto; font-weight: 700; line-height: 1.5; }
+.note__body { min-width: 0; }
+.note__body > :last-child { margin-bottom: 0; }
+.note--info { background: var(--navy-tint); border-color: #c3d8f0; }
+.note--ok { background: var(--ok-tint); border-color: #bfe0c7; }
+.note--warn { background: var(--warn-tint); border-color: #ecd9a4; }
+.note--err { background: var(--err-tint); border-color: #eebcbc; }
+
+/* Withdrawal. Its own component, because a retracted figure must not be
+   stylistically interchangeable with an ordinary caveat. */
+.withdrawn {
+  border-left: 3px solid var(--err);
+  background: var(--err-tint);
+  padding: var(--s-3) var(--s-4);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  margin: var(--s-4) 0;
+  font-size: var(--t-sm);
+}
+.withdrawn strong { color: var(--err); }
+
+/* ---------------------------------------------------------------- tables */
+.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
+table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); background: var(--surface); }
+th, td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--rule); }
+th {
+  background: #f5f8fc;
+  font-weight: 650;
+  font-size: var(--t-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ink-soft);
+  position: sticky;
+  top: 0;
+  white-space: nowrap;
+}
+tbody tr:last-child td { border-bottom: none; }
+tbody tr:hover { background: #f8fbfe; }
+td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* A column header that carries its own definition. */
+th abbr { text-decoration: underline dotted; cursor: help; }
+
+/* ---------------------------------------------------------------- charts */
+.chart { width: 100%; overflow: visible; }
+.chart text { font-family: var(--font); font-size: 11px; fill: var(--ink-soft); }
+.chart .axis line, .chart .axis path { stroke: var(--rule-strong); }
+.chart .gridline { stroke: var(--rule); stroke-dasharray: 2 3; }
+.chart .mark { stroke: var(--surface); stroke-width: 1; }
+.chart .mark:hover { stroke: var(--ink); stroke-width: 1.5; }
+.chart .band { fill: var(--navy-tint); }
+.chart__caption { font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s-2); }
+
+.tooltip {
+  position: fixed;
+  pointer-events: none;
+  background: var(--ink);
+  color: #fff;
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--t-xs);
+  line-height: 1.5;
+  z-index: 50;
+  max-width: 22rem;
+  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.18);
+}
+.tooltip[hidden] { display: none; }
+
+/* --------------------------------------------------------------- buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  padding: var(--s-2) var(--s-4);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--rule-strong);
+  background: var(--surface);
+  color: var(--ink);
+  font: inherit;
+  font-size: var(--t-sm);
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+}
+.btn:hover { background: #f5f8fc; }
+.btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
+.btn--primary:hover { background: var(--navy-deep); color: #fff; }
+.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0; }
+
+/* ----------------------------------------------------------------- forms */
+label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s-1); }
+.field { margin-bottom: var(--s-4); }
+.field__help { font-size: var(--t-xs); color: var(--ink-soft); margin-top: var(--s-1); }
+input[type="text"], input[type="number"], input[type="file"], select {
+  width: 100%;
+  padding: var(--s-2) var(--s-3);
+  border: 1px solid var(--rule-strong);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--t-sm);
+  background: var(--surface);
+  color: var(--ink);
+}
+input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible {
+  outline: 2px solid var(--navy);
+  outline-offset: 2px;
+}
+
+/* -------------------------------------------------------------- progress */
+.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.steps li {
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-3);
+  padding: var(--s-2) var(--s-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--t-sm);
+}
+.steps li[data-state="running"] { background: var(--navy-tint); font-weight: 600; }
+.steps li[data-state="done"] { color: var(--ink-soft); }
+.steps li[data-state="failed"] { background: var(--err-tint); color: var(--err); font-weight: 600; }
+.steps__glyph { flex: 0 0 1.25em; font-weight: 700; }
+
+/* ------------------------------------------------------------- structure */
+.viewer { width: 100%; height: 26rem; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); }
+/* Height is set explicitly above, and must stay that way: 3Dmol measures its
+   container when the viewer is created, and a container that is zero-high at
+   that moment renders a canvas nothing can see, with no error anywhere. */
+.viewer__fallback { padding: var(--s-4); }
+.swatch {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 2px;
+  vertical-align: -1px;
+  margin-right: var(--s-1);
+  border: 1px solid var(--rule-strong);
+}
+.viewer-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-2); font-size: var(--t-sm); }
+
+/* ---------------------------------------------------------------- misc */
+.stack > * + * { margin-top: var(--s-4); }
+.row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: baseline; }
+hr { border: none; border-top: 1px solid var(--rule); margin: var(--s-8) 0; }
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* --------------------------------------------------------------- narrow */
+@media (max-width: 60rem) {
+  .shell { flex-direction: column; }
+  .sidebar { flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3) var(--s-4); }
+  .nav { flex-direction: row; flex-wrap: wrap; }
+  .sidebar__foot { margin-top: 0; width: 100%; }
+  .wrap { padding: var(--s-6) var(--s-4) var(--s-12); }
+  h1 { font-size: var(--t-xl); }
+}
+
+/* ---------------------------------------------------------------- print
+ * The report is emailed and printed. Hover states do not survive paper, so
+ * nothing meaningful may live in one. */
+@media print {
+  .sidebar, .btn-row, .tooltip { display: none !important; }
+  body { background: #fff; }
+  .card { box-shadow: none; break-inside: avoid; }
+  .table-wrap { overflow: visible; }
+  a { color: var(--ink); text-decoration: underline; }
+  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--ink-faint); }
+}
+
+.print-only { display: none; }
+
+@media print {
+  /* A WebGL canvas prints as a blank rectangle, so the box is dropped. Its
+     furniture has to go with it: a paper page kept the design picker, the
+     colour legend for a picture that was not there, and an instruction to
+     "Rotate it". The caption's print-only half says where the files are
+     instead. */
+  .viewer,
+  .viewer + .viewer-legend,
+  .viewer-picker { display: none !important; }
+  .screen-only { display: none !important; }
+  .print-only { display: inline !important; }
+}