archaeopteryx 3.26.0 → 3.28.0

package/archaeopteryx.js

@@ -20,7 +20,7 @@
  *
  */
 
-// v 3.26.0
+// v 3.28.0
 // 2026-09-17
 //
 // Archaeopteryx.js is a software tool for the visualization and
@@ -103,7 +103,7 @@ function (root, d3, forester, phyloXml) {
     // IIFE's own function name -- a plain object says what it is.)
     let archaeopteryx = {};
 
-    const VERSION = '3.26.0';
+    const VERSION = '3.28.0';
     const WEBSITE = 'https://cmzmasek.github.io/archaeopteryx-js/';
     const DESKTOP_WEBSITE = 'https://cmzmasek.github.io/archaeopteryx/';
     const SOURCE_WEBSITE = 'https://github.com/cmzmasek/archaeopteryx-js';
@@ -272,6 +272,9 @@ function (root, d3, forester, phyloXml) {
     const PHYLOGRAM_MIN_BRANCH_FRACTION = 0.5;
     const SHORTEN_NAME_MAX_LENGTH = 18;
     const PANEL_STYLE_ID = 'aptx-panel-styles';
+    // The tree's own <svg>: named so that the stylesheet can say what a host
+    // page's rules for a bare "svg" would otherwise decide (hostProofCss).
+    const TREE_SVG_CLASS = 'aptx-tree';
     // How wide a legend row is treated as, for grabbing it with the mouse.
     const PANEL_WIDTH = 214; // fixed control-panel width; shared by the .aptx-panel CSS and leftPanelClearance() so the two can't drift
     const PANEL_WIDTH_COMPACT = 196; // the same, at panelDensity 'compact'; panelWidth() picks between them
@@ -303,6 +306,52 @@ function (root, d3, forester, phyloXml) {
     const MESSAGE = 'ArchaeopteryxJS: ';
     const ERROR = 'ArchaeopteryxJS: ERROR: ';
 
+    // What this launch had to say, kept as well as printed. The console is
+    // where a warning goes and where nobody embedding the viewer looks: a
+    // site passed a retired key for a month and a forced visualization for
+    // longer (BV-BRC, 2026-10-08), each announced on every page load. The
+    // Diagnostics report (archaeopteryx.doctor, further down) reads this
+    // list; 'problem' entries are somebody's mistake and light the dot on
+    // the program name, 'note' entries are only stated. The same line twice
+    // is one entry with a count.
+    //
+    // The list belongs to the tree on view. It starts afresh whenever the
+    // launch proper (launchInto) begins for a tree -- a new launch, or
+    // showTree() moving to another tree of the file, whose config warnings
+    // are then said again and whose per-tree ones are its own. A launch that
+    // is REJECTED while an earlier viewer is still on the page gives that
+    // viewer its list back and adds one line saying what failed (the shell
+    // round launch()): the page still shows the earlier tree, and the report
+    // describes the page.
+    const DIAGNOSTICS_MAX = 40;
+    let _diagnostics = [];
+    // What is on view, noted at the moment a launch takes the page over (it
+    // clears the container): the report's "launch" section and the dot read
+    // this, never the module's working state, which a launch writes to
+    // before the checks that can still reject it.
+    let _onView = null;
+    let _tookOver = false;
+    let _recordedErrors = (typeof WeakSet === 'function') ? new WeakSet() : null;
+    function recordDiagnostic(level, line) {
+        let text = String(line).replace(/^ArchaeopteryxJS: (WARNING: |ERROR: )?/, '');
+        let seen = _diagnostics.find(function (d) {
+            return d.level === level && d.text === text;
+        });
+        if (seen) {
+            seen.count += 1;
+        } else if (_diagnostics.length < DIAGNOSTICS_MAX) {
+            _diagnostics.push({level: level, text: text, count: 1});
+        }
+        if (level === 'problem') {
+            syncDoctorDot();
+        }
+    }
+    // Print as before (same console method, same line) and keep it.
+    function say(level, method, line) {
+        console[method](line);
+        recordDiagnostic(level, line);
+    }
+
     // Call-time dependency guards (the UMD header explains why they are not
     // load-time): each failure names exactly what is missing.
     function requireD3() {
@@ -408,6 +457,7 @@ function (root, d3, forester, phyloXml) {
     // archaeopteryx-anime.svg), inlined so the library stays a single file.
     // Gradient ids are prefixed: they were generic enough to collide with an
     // embedding page's own defs.
+    // (drawn with attributes, as any svg file is; paintInline moves its paint into styles where it is used)
     const ARCHAEOPTERYX_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-label="Archaeopteryx"> <defs> <linearGradient id="aptxlogo-wg" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#4f46e5"/><stop offset="0.55" stop-color="#38bdf8"/><stop offset="1" stop-color="#a7f3d0"/> </linearGradient> <linearGradient id="aptxlogo-wg2" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#3730a3"/><stop offset="1" stop-color="#4f79e0"/> </linearGradient> <linearGradient id="aptxlogo-tg" x1="0" y1="1" x2="1" y2="0"> <stop offset="0" stop-color="#f43f5e"/><stop offset="0.5" stop-color="#fb923c"/><stop offset="1" stop-color="#fde047"/> </linearGradient> <linearGradient id="aptxlogo-bg" x1="0" y1="0" x2="0" y2="1"> <stop offset="0" stop-color="#fff7e0"/><stop offset="1" stop-color="#fcd34d"/> </linearGradient> </defs> <g transform="translate(28.9,18.0) scale(0.9091)"> <g stroke="#25304f" stroke-width="6" stroke-linejoin="round" stroke-linecap="round"> <path d="M 78.0,152.0 C 49.3,150.6 12.5,173.3 -4.4,194.3 C 25.1,192.0 66.1,175.5 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 78.0,152.0 C 48.1,143.8 3.5,158.8 -19.7,176.6 C 12.1,181.2 59.5,173.7 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 78.0,152.0 C 51.8,138.2 6.9,142.5 -18.7,154.0 C 10.0,164.8 56.0,167.9 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 78.0,152.0 C 58.9,135.3 20.6,130.3 -2.8,135.1 C 18.9,149.7 56.6,161.2 78.0,152.0 Z" fill="url(#aptxlogo-tg)"/> <path d="M 118.0,126.0 C 110.4,106.2 84.4,93.0 65.5,92.1 C 75.9,110.5 99.0,129.6 118.0,126.0 Z" fill="url(#aptxlogo-wg2)"/> <path d="M 118.0,126.0 C 115.6,103.3 92.6,79.7 73.5,71.3 C 79.1,93.8 97.5,122.0 118.0,126.0 Z" fill="url(#aptxlogo-wg2)"/> <path d="M 118.0,126.0 C 123.0,106.1 110.4,79.8 96.5,67.4 C 94.4,87.9 101.6,117.0 118.0,126.0 Z" fill="url(#aptxlogo-wg2)"/> <path d="M 106,172 L 101,202 M 132,172 L 129,202" fill="none" stroke-width="9"/> <path d="M 101,202 L 88,209 M 101,202 L 112,210 M 101,202 L 99,213 M 129,202 L 116,209 M 129,202 L 140,210 M 129,202 L 128,213" fill="none" stroke-width="6"/> <path d="M 96,176 C 74,168 66,146 76,128 C 86,110 110,102 132,106 C 152,110 164,126 162,146 C 160,166 142,180 120,180 C 112,180 103,179 96,176 Z" fill="url(#aptxlogo-bg)"/> <path d="M 100,174 C 86,166 82,150 90,138 C 96,146 108,152 122,152 C 136,152 148,148 156,140 C 160,156 150,172 128,177 C 118,179 108,178 100,174 Z" fill="#fff6dd" stroke="none"/> <path d="M 96,176 C 74,168 66,146 76,128 C 86,110 110,102 132,106 C 152,110 164,126 162,146 C 160,166 142,180 120,180 C 112,180 103,179 96,176 Z" fill="none"/> <path d="M 150.0,60.0 C 159.5,51.2 158.7,35.2 152.9,25.9 C 145.3,35.7 141.5,51.8 150.0,60.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 164.0,56.0 C 174.4,51.0 177.8,37.3 175.2,28.0 C 166.2,34.2 158.9,46.9 164.0,56.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 136.0,66.0 C 141.8,56.5 137.0,44.2 129.6,38.5 C 125.7,48.3 126.7,61.9 136.0,66.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 158,58 C 186,54 208,72 208,96 C 208,120 188,136 164,134 C 140,132 126,114 128,92 C 130,72 142,60 158,58 Z" fill="url(#aptxlogo-bg)"/> <path d="M 203,82 C 216,84 230,92 238,100 C 230,108 216,113 202,112 C 206,104 206,90 203,82 Z" fill="#fb923c"/> <path d="M 204,101 C 214,102 224,103 234,101" fill="none" stroke-width="4"/> <path d="M 128.0,116.0 C 113.1,91.9 75.3,80.3 50.0,83.2 C 68.3,104.8 103.7,124.6 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 128.0,116.0 C 118.0,85.8 79.7,60.2 51.1,54.1 C 65.4,83.1 98.9,116.3 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 128.0,116.0 C 127.0,83.7 97.3,47.3 71.5,32.7 C 76.9,65.0 99.8,107.4 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> <path d="M 128.0,116.0 C 136.1,88.7 121.1,50.1 103.3,30.9 C 99.0,59.5 106.6,101.2 128.0,116.0 Z" fill="url(#aptxlogo-wg)"/> </g> <g> <ellipse cx="172" cy="94" rx="15" ry="17" fill="#25304f"/> <ellipse cx="172" cy="97" rx="10" ry="11" fill="#38bdf8"/> <circle cx="167" cy="88" r="6" fill="#ffffff"/> <circle cx="178" cy="103" r="3" fill="#ffffff" opacity="0.9"/> <ellipse cx="146" cy="112" rx="9" ry="5" fill="#fb7185" opacity="0.75"/> <path d="M 52,53 C 53.62,59.75 54.25,60.38 61,62 C 54.25,63.62 53.62,64.25 52,71 C 50.38,64.25 49.75,63.62 43,62 C 49.75,60.38 50.38,59.75 52,53 Z" fill="#fde68a"/> <path d="M 222,161 C 223.26,166.25 223.75,166.74 229,168 C 223.75,169.26 223.26,169.75 222,175 C 220.74,169.75 220.25,169.26 215,168 C 220.25,166.74 220.74,166.25 222,161 Z" fill="#fde68a"/> <path d="M 86,208 C 87.08,212.5 87.5,212.92 92,214 C 87.5,215.08 87.08,215.5 86,220 C 84.92,215.5 84.5,215.08 80,214 C 84.5,212.92 84.92,212.5 86,208 Z" fill="#fde68a"/> </g> </g> </svg>';
     const NODE_DATA = 'node_data_dialog';
     const COLOR_PICKER = 'color_picker_dialog';
@@ -440,6 +490,7 @@ function (root, d3, forester, phyloXml) {
     const CLOCK_PLOT_BUTTON = 'clock_plot_b';
     const CLOCK_PLOT_DIALOG = 'aptx_clock_plot';
     const ABOUT_DIALOG = 'aptx_about';
+    const DOCTOR_DIALOG = 'aptx_doctor';
     const TREE_PROPERTIES_DIALOG = 'aptx_tree_props';
     const PROG_NAME = 'progname';
     const PROGNAMELINK = 'prognamelink';
@@ -1491,9 +1542,9 @@ function (root, d3, forester, phyloXml) {
         let fill = hoverGlowColor(d);
         HOVER_GLOW_RADII.forEach(function (radius, i) {
             g.append('circle')
-                .attr('fill-opacity', HOVER_GLOW_ALPHAS[i])
-                .attr('stroke', 'none')
-                .attr('fill', fill)
+                .style('fill-opacity', HOVER_GLOW_ALPHAS[i])
+                .style('stroke', 'none')
+                .style('fill', fill)
                 .attr('r', (dia * radius) / 2);
         });
     }
@@ -1938,7 +1989,7 @@ function (root, d3, forester, phyloXml) {
                     || (c.label && String(c.label).toLowerCase() === want);
             }) || null;
             if (!requested) {
-                console.warn(WARNING + ': initialVisualization "'
+                say('problem', 'warn', WARNING + ': initialVisualization "'
                     + _settings.initialVisualization
                     + '" names no visualization of this tree; using the automatic choice');
             }
@@ -1968,7 +2019,7 @@ function (root, d3, forester, phyloXml) {
                     ? requested.values.length + ' distinct values on this tree, more than the '
                         + LEGEND_MAX_ROWS + ' the legend lists'
                     : 'a value on ' + requested.coverage + ' of the tree\'s ' + requested.total + ' tips';
-                console.warn(WARNING + ': initialVisualization "' + _settings.initialVisualization
+                say('problem', 'warn', WARNING + ': initialVisualization "' + _settings.initialVisualization
                     + '" names a field with ' + why + '; left to itself the viewer would '
                     + (auto ? 'open with "' + auto.label + '" (' + auto.values.length + ' values)'
                         : 'open uncoloured'));
@@ -2711,7 +2762,7 @@ function (root, d3, forester, phyloXml) {
         chips.forEach(function (chip) {
             let t = g.append('text')
                 .attr('x', chipRight).attr('y', baseline)
-                .attr('text-anchor', 'end')
+                .style('text-anchor', 'end')
                 .style('font', rowFont)
                 .style('fill', ink)
                 .style('fill-opacity', 0.75)
@@ -2739,10 +2790,10 @@ function (root, d3, forester, phyloXml) {
             let frac = max > min ? (mean - min) / (max - min) : 0.5;
             let gradId = 'aptx_legend_ramp_' + id;
             let grad = g.append('defs').append('linearGradient').attr('id', gradId);
-            grad.append('stop').attr('offset', '0%').attr('stop-color', VIS_COLOR_RAMP[0]);
+            grad.append('stop').attr('offset', '0%').style('stop-color', VIS_COLOR_RAMP[0]);
             grad.append('stop').attr('offset', (100 * Math.max(0.01, Math.min(0.99, frac))) + '%')
-                .attr('stop-color', VIS_COLOR_RAMP[1]);
-            grad.append('stop').attr('offset', '100%').attr('stop-color', VIS_COLOR_RAMP[2]);
+                .style('stop-color', VIS_COLOR_RAMP[1]);
+            grad.append('stop').attr('offset', '100%').style('stop-color', VIS_COLOR_RAMP[2]);
             let barY = baseline + 6;
             let barW = width - 2 * PAD;
             g.append('rect')
@@ -2758,7 +2809,7 @@ function (root, d3, forester, phyloXml) {
                 .text(legendNumberLabel(min));
             g.append('text')
                 .attr('x', x + PAD + barW).attr('y', lblY)
-                .attr('text-anchor', 'end')
+                .style('text-anchor', 'end')
                 .style('font', rowFont).style('fill', ink)
                 .text(legendNumberLabel(max));
             baseline = lblY;
@@ -2823,7 +2874,7 @@ function (root, d3, forester, phyloXml) {
                 .text(r.text);
             g.append('text')
                 .attr('x', x + width - PAD).attr('y', baseline)
-                .attr('text-anchor', 'end')
+                .style('text-anchor', 'end')
                 .style('font', rowFont)
                 .style('fill', ink)
                 .style('fill-opacity', 0.55)
@@ -3333,7 +3384,7 @@ function (root, d3, forester, phyloXml) {
             .style('paint-order', 'stroke')
             // anchor, dy and x all come from nodeLabelPlacement, which the
             // occupancy box is built from too
-            .attr('text-anchor', function (d) {
+            .style('text-anchor', function (d) {
                 return nodeLabelPlacement(d).anchor;
             })
             .attr('transform', function (d) {
@@ -3371,7 +3422,7 @@ function (root, d3, forester, phyloXml) {
         node.select('text.bllabel')
             .style('font-size', _state.branchDataFontSize + 'px')
             .style('fill', _state.branchColorDefault)
-            .attr('text-anchor', function () {
+            .style('text-anchor', function () {
                 return radialDisplay() ? 'middle' : null;
             })
             .attr('transform', function (d) {
@@ -3538,9 +3589,9 @@ function (root, d3, forester, phyloXml) {
         if (tipGuides || collapsedGuides.length > 0) {
             let ext = _svgGroup.insert('g', 'g').attr('class', 'aptx-align-ext');
             let guideStyle = function (sel) {
-                return sel.attr('fill', 'none')
-                    .attr('stroke-width', 1)
-                    .attr('stroke', _state.branchColorDefault)
+                return sel.style('fill', 'none')
+                    .style('stroke-width', 1)
+                    .style('stroke', _state.branchColorDefault)
                     .style('stroke-opacity', 0.25);
             };
             if (tipGuides) {
@@ -3585,10 +3636,10 @@ function (root, d3, forester, phyloXml) {
                 conn.selectAll('line')
                     .data(connected)
                     .enter().append('line')
-                    .attr('stroke', _state.branchColorDefault)
+                    .style('stroke', _state.branchColorDefault)
                     // width/opacity match the rectangular aligned extensions; the
                     // dash alone marks these as connectors (0.5px at 0.3 vanished)
-                    .attr('stroke-width', 1)
+                    .style('stroke-width', 1)
                     .style('stroke-opacity', 0.4)
                     .style('stroke-dasharray', '2,3')
                     .attr('x1', function (d) { return radialXY(d.x, innerY(d))[0]; })
@@ -4682,7 +4733,7 @@ function (root, d3, forester, phyloXml) {
             sync(g, 'text.extlabel', d._extLabelText !== '', function (sel) {
                 sel.append('text')
                     .attr('class', 'extlabel')
-                    .attr('text-anchor', d.children ? 'end' : 'start')
+                    .style('text-anchor', d.children ? 'end' : 'start')
                     .style('font-family', font)
                     .style('fill-opacity', 0.5);
             });
@@ -4698,7 +4749,7 @@ function (root, d3, forester, phyloXml) {
                 sync(g, 'text.conflabel', d._confText !== '', function (sel) {
                     sel.append('text')
                         .attr('class', 'conflabel')
-                        .attr('text-anchor', 'middle')
+                        .style('text-anchor', 'middle')
                         .style('font-family', font);
                 });
             }
@@ -4706,7 +4757,7 @@ function (root, d3, forester, phyloXml) {
                 sync(g, 'text.brancheventlabel', d._eventText !== '', function (sel) {
                     sel.append('text')
                         .attr('class', 'brancheventlabel')
-                        .attr('text-anchor', 'middle')
+                        .style('text-anchor', 'middle')
                         .style('font-family', font);
                 });
             }
@@ -5346,9 +5397,16 @@ function (root, d3, forester, phyloXml) {
         let els = sizeLayer(_geomLayers.branches, 'path', branchList.length);
         branchList.forEach(function (b, k) {
             b.el = els[k];
-            b.el.setAttribute('fill', 'none');
-            b.el.setAttribute('stroke', b.color);
-            b.el.setAttribute('stroke-width', b.width);
+            // These paths are kept from one drawing to the next, and a style
+            // is not an attribute: a value that is no colour or no width (a
+            // file's <width>-1</width>) is IGNORED, and the path would keep
+            // what another batch gave it the last time. So the old is taken
+            // off first, and such a batch is drawn as the svg has it.
+            b.el.style.setProperty('fill', 'none');
+            b.el.style.removeProperty('stroke');
+            b.el.style.setProperty('stroke', b.color);
+            b.el.style.removeProperty('stroke-width');
+            b.el.style.setProperty('stroke-width', b.width);
         });
         // `last`: batches painted after the sorted ones, whatever their count
         let paintLayer = function (batches, layer, last) {
@@ -5825,14 +5883,14 @@ function (root, d3, forester, phyloXml) {
                 return;
             }
             if (dep.to) {
-                console.warn(WARNING + ': "' + k + '" was replaced by "' + dep.to
+                say('problem', 'warn', WARNING + ': "' + k + '" was replaced by "' + dep.to
                     + '": ' + dep.note);
                 // An explicit new key always wins over the old alias.
                 if (given[dep.to] === undefined) {
                     given[dep.to] = dep.map(given[k]);
                 }
             } else {
-                console.warn(WARNING + ': "' + k + '" is retired and has no effect: ' + dep.note);
+                say('problem', 'warn', WARNING + ': "' + k + '" is retired and has no effect: ' + dep.note);
             }
             delete given[k];
         });
@@ -6078,7 +6136,7 @@ function (root, d3, forester, phyloXml) {
             // malformed domains are skipped, never fatal -- said once, here
             let ignored = forester.domainArchitectureStats(_treeData).ignored;
             if (ignored > 0) {
-                console.warn(MESSAGE + ignored + ' protein domain' + (ignored === 1 ? '' : 's')
+                say('note', 'warn', MESSAGE + ignored + ' protein domain' + (ignored === 1 ? '' : 's')
                     + ' with a missing or impossible from / to / E-value ignored');
             }
         }
@@ -6111,11 +6169,11 @@ function (root, d3, forester, phyloXml) {
             // are left out, never fatal -- said once, here
             let gs = forester.geneRegionStats(_treeData);
             if (gs.ignored > 0) {
-                console.warn(MESSAGE + gs.ignored + ' sequence location' + (gs.ignored === 1 ? '' : 's')
+                say('note', 'warn', MESSAGE + gs.ignored + ' sequence location' + (gs.ignored === 1 ? '' : 's')
                     + ' not in the form contig:start-end(+) ignored');
             }
             if (gs.otherContigs > 0) {
-                console.warn(MESSAGE + gs.otherContigs + ' gene' + (gs.otherContigs === 1 ? '' : 's')
+                say('note', 'warn', MESSAGE + gs.otherContigs + ' gene' + (gs.otherContigs === 1 ? '' : 's')
                     + ' on a genome\'s other contigs not drawn: the gene track shows one contig per genome');
             }
         }
@@ -6347,11 +6405,11 @@ function (root, d3, forester, phyloXml) {
             _settings.enableDynamicSizing = true;
         }
         if (_settings.displayWidth && _settings.enableDynamicSizing === true) {
-            console.log(WARNING + ': dynamic sizing is turned on, will ignore displayWidth setting');
+            say('note', 'log', WARNING + ': dynamic sizing is turned on, will ignore displayWidth setting');
             _settings.displayWidth = 0;
         }
         if (_settings.displayHeight && _settings.enableDynamicSizing === true) {
-            console.log(WARNING + ': dynamic sizing is turned on, will ignore displayHeight setting');
+            say('note', 'log', WARNING + ': dynamic sizing is turned on, will ignore displayHeight setting');
             _settings.displayHeight = 0;
         }
         if ((!_settings.displayWidth) && (!_settings.enableDynamicSizing)) {
@@ -6640,7 +6698,40 @@ function (root, d3, forester, phyloXml) {
 
     // launch(container, tree, config) -> a viewer handle {getSelectedNodes,
     // destroy}. Exactly three arguments; config is THE one config object.
-    archaeopteryx.launch = function (container, phylo, config) {
+    // launch() proper is launchChecked below. This shell keeps what a
+    // rejected launch said: the thrown message reaches whoever called, which
+    // on an embedding site is often a catch block nobody reads, and
+    // archaeopteryx.doctor() can still tell. (launchArchaeopteryx has its own
+    // failures -- a file that does not parse -- and reports them through the
+    // same function; an error is recorded once, whoever catches it first.)
+    function recordLaunchFailure(e) {
+        if (_recordedErrors && e && typeof e === 'object') {
+            if (_recordedErrors.has(e)) {
+                return;
+            }
+            _recordedErrors.add(e);
+        }
+        recordDiagnostic('problem', 'launch failed: '
+            + String(e && e.message ? e.message : e).replace(/^ArchaeopteryxJS: ERROR: /, ''));
+    }
+    archaeopteryx.launch = function () {
+        let before = _diagnostics;
+        let wasOnView = _onView;
+        _tookOver = false;
+        try {
+            return launchChecked.apply(null, arguments);
+        } catch (e) {
+            if (wasOnView && !_tookOver) {
+                // rejected before it touched the page: the earlier viewer is
+                // still there, and so is everything said about it
+                _diagnostics = before;
+            }
+            recordLaunchFailure(e);
+            throw e;
+        }
+    };
+
+    function launchChecked(container, phylo, config) {
 
         // Bad input is the caller's bug, so it is thrown at the caller. It used
         // to pop a browser alert and return, which blocks the whole tab and
@@ -6715,12 +6806,14 @@ function (root, d3, forester, phyloXml) {
         let view = config && config.view;
         let start = (view && Number.isInteger(view.tree) && view.tree > 0 && view.tree < trees.length) ? view.tree : 0;
         return launchInto(container, trees, start, config);
-    };
+    }
 
     // The launch proper, for one tree of the list: launch() validates and
     // starts at the first, showTree() re-enters here for another.
     function launchInto(container, trees, index, config) {
         let phylo = trees[index];
+        // what is said from here on is said about THIS tree (see _diagnostics)
+        _diagnostics = [];
         let cfg = readConfig(config);
         requireForester();
         requireD3();
@@ -6767,6 +6860,11 @@ function (root, d3, forester, phyloXml) {
         checkLayoutValue(cfg.state ? cfg.state.layout : undefined);
         initializeSettings(cfg.settings);
 
+        // From here the page is this launch's: nothing below is expected to
+        // throw, and what a previous one drew goes now.
+        _tookOver = true;
+        _onView = {config: config, container: containerEl, tips: _basicTreeProperties.externalNodesCount,
+            tree: index + 1, trees: trees.length};
         // whatever a previous launch left in this container (or in the
         // container before it) goes now, so the old tree does not sit under
         // the card while the new one is prepared
@@ -6805,8 +6903,15 @@ function (root, d3, forester, phyloXml) {
             createGui();
 
             _baseSvg = d3.select(containerEl).append('svg')
-                .attr('width', _displayWidth)
-                .attr('height', _displayHeight)
+                .attr('class', TREE_SVG_CLASS)
+                .call(sizeTreeSvg, _displayWidth, _displayHeight)
+                // The tree's font, for the texts that state only a size (the
+                // alignment strip's ruler and caption, the heat map strip's
+                // numbers and caption): they were drawn in the PAGE's font,
+                // in boxes measured for this one, and in an exported file in
+                // whatever the program that opened it thought best. Inline,
+                // so that the file has it too.
+                .style('font-family', FONT_DEFAULTS)
                 // an inline svg sits on a text baseline, and the room left
                 // under it for descenders makes a container sized to the
                 // svg a few pixels taller than the svg itself -- enough to
@@ -6829,8 +6934,7 @@ function (root, d3, forester, phyloXml) {
                         }
                         _displayWidth = size.w;
                         _displayHeight = size.h;
-                        _baseSvg.attr('width', size.w);
-                        _baseSvg.attr('height', size.h);
+                        sizeTreeSvg(_baseSvg, size.w, size.h);
                         rebuildOverview();
                         if ((_settings.zoomToFitUponWindowResize === true) && (_zoomed_x_or_y === false) && (Math.abs(currentZoomScale() - 1.0) < 0.001)) {
                             zoomToFit();
@@ -6977,6 +7081,11 @@ function (root, d3, forester, phyloXml) {
         cfg.view = view || viewForTree(_trees[index]);
         let handle = launchInto(_container, _trees, index, cfg);
         _launchConfig = launchConfig;
+        // the report shows the config the SITE passed, not this copy with
+        // the tree's own view added
+        if (_onView) {
+            _onView.config = launchConfig;
+        }
         return handle;
     }
 
@@ -7897,7 +8006,7 @@ function (root, d3, forester, phyloXml) {
                 let x1 = Math.round(originX + (endI * cw));
                 g.append('rect').attr('x', x0).attr('y', cy)
                     .attr('width', Math.max(1, x1 - x0)).attr('height', rh)
-                    .attr('fill', 'rgb(' + runRgb.join(',') + ')');
+                    .style('fill', 'rgb(' + runRgb.join(',') + ')');
                 runStart = -1;
                 runRgb = null;
             };
@@ -7912,7 +8021,7 @@ function (root, d3, forester, phyloXml) {
                 g.append('line')
                     .attr('x1', Math.round(originX + (gapStart * cw))).attr('y1', mid)
                     .attr('x2', Math.round(originX + (endI * cw))).attr('y2', mid)
-                    .attr('stroke', ink).attr('stroke-opacity', 0.35).attr('stroke-width', 1);
+                    .style('stroke', ink).style('stroke-opacity', 0.35).style('stroke-width', 1);
                 gapStart = -1;
             };
             for (let i = 0; i < visible; ++i) {
@@ -7936,9 +8045,9 @@ function (root, d3, forester, phyloXml) {
                     let x1 = Math.round(originX + ((i + 1) * cw));
                     g.append('rect').attr('x', x0).attr('y', cy)
                         .attr('width', Math.max(1, x1 - x0)).attr('height', rh)
-                        .attr('fill', 'rgb(' + rgb.join(',') + ')');
+                        .style('fill', 'rgb(' + rgb.join(',') + ')');
                     g.append('text').attr('x', x0 + ((x1 - x0) / 2)).attr('y', cy + (rh / 2))
-                        .attr('text-anchor', 'middle').attr('dy', '0.35em')
+                        .style('text-anchor', 'middle').attr('dy', '0.35em')
                         .style('font-family', 'monospace').style('font-size', fontPx + 'px')
                         .style('fill', forester.msaLetterInk(rgb))
                         .text(ch.toUpperCase());
@@ -7962,13 +8071,13 @@ function (root, d3, forester, phyloXml) {
         if (offset <= 0) {
             g.append('line').attr('x1', Math.round(originX)).attr('x2', Math.round(originX))
                 .attr('y1', rowsTop).attr('y2', rowsBottom)
-                .attr('stroke', ink).attr('stroke-opacity', 0.7).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-opacity', 0.7).style('stroke-width', 1);
         }
         if ((offset + visible) >= total) {
             let xe = Math.round(originX + (visible * cw));
             g.append('line').attr('x1', xe).attr('x2', xe)
                 .attr('y1', rowsTop).attr('y2', rowsBottom)
-                .attr('stroke', ink).attr('stroke-opacity', 0.7).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-opacity', 0.7).style('stroke-width', 1);
         }
 
         // Scored over the visible WINDOW only -- the whole alignment would
@@ -8007,9 +8116,9 @@ function (root, d3, forester, phyloXml) {
             g.append('line')
                 .attr('x1', from).attr('x2', guideEnd)
                 .attr('y1', d.x).attr('y2', d.x)
-                .attr('stroke', ink)
-                .attr('stroke-width', 1)
-                .attr('stroke-dasharray', '2,3')
+                .style('stroke', ink)
+                .style('stroke-width', 1)
+                .style('stroke-dasharray', '2,3')
                 .style('stroke-opacity', 0.35)
                 .style('pointer-events', 'none');
         }
@@ -8019,7 +8128,7 @@ function (root, d3, forester, phyloXml) {
         let strip = floatStripGroup('aptx-msa-strip', _clusterH, stripH);
         strip.append('rect').attr('x', Math.round(originX) - 2).attr('y', _clusterH)
             .attr('width', trackW + 4).attr('height', stripH)
-            .attr('fill', _state.backgroundColorDefault);
+            .style('fill', _state.backgroundColorDefault);
         let consTop = _clusterH + MSA_CONS_TOP_GAP;
         // A caption on the panel's own background, so it stays readable over
         // whatever the band happens to draw underneath it.
@@ -8032,9 +8141,9 @@ function (root, d3, forester, phyloXml) {
             let xe = Math.round(originX) + trackW - 3;
             strip.append('rect').attr('x', xe - w).attr('y', y - 8)
                 .attr('width', w).attr('height', 11)
-                .attr('fill', _state.backgroundColorDefault).attr('fill-opacity', 0.85);
+                .style('fill', _state.backgroundColorDefault).style('fill-opacity', 0.85);
             strip.append('text').attr('x', xe - 3).attr('y', y)
-                .attr('text-anchor', 'end')
+                .style('text-anchor', 'end')
                 .style('font-size', '8px').style('fill', ink).style('fill-opacity', 0.9)
                 .text(txt);
         };
@@ -8051,7 +8160,7 @@ function (root, d3, forester, phyloXml) {
             strip.append('line')
                 .attr('x1', Math.round(originX)).attr('x2', Math.round(originX) + trackW)
                 .attr('y1', floor).attr('y2', floor)
-                .attr('stroke', ink).attr('stroke-opacity', 0.5).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-opacity', 0.5).style('stroke-width', 1);
             for (let i = 0; i < visible; ++i) {
                 let col = logo.columns[i];
                 if (!col || !(col.height > 0)) {
@@ -8073,7 +8182,7 @@ function (root, d3, forester, phyloXml) {
                         .attr('transform', 'translate(' + (x0 + ((x1 - x0) / 2)) + ','
                             + (y - (glyph.descent * sy)) + ')'
                             + ' scale(' + (Math.max(1, x1 - x0) / glyph.width) + ',' + sy + ')')
-                        .attr('text-anchor', 'middle')
+                        .style('text-anchor', 'middle')
                         .style('font-family', 'monospace')
                         .style('font-size', MSA_LOGO_FONT_PX + 'px')
                         .style('fill', rgb === null ? ink : 'rgb(' + rgb.join(',') + ')')
@@ -8086,7 +8195,7 @@ function (root, d3, forester, phyloXml) {
         } else {
             strip.append('rect').attr('x', Math.round(originX)).attr('y', consTop)
                 .attr('width', trackW).attr('height', MSA_CONS_BAR_H)
-                .attr('fill', ink).attr('fill-opacity', 0.08);
+                .style('fill', ink).style('fill-opacity', 0.08);
             for (let i = 0; i < visible; ++i) {
                 let score = cons.scores[i] || 0;
                 if (score <= 0) {
@@ -8097,7 +8206,7 @@ function (root, d3, forester, phyloXml) {
                 let x1 = Math.round(originX + ((i + 1) * cw));
                 strip.append('rect').attr('x', x0).attr('y', (consTop + MSA_CONS_BAR_H) - bh)
                     .attr('width', Math.max(1, x1 - x0)).attr('height', bh)
-                    .attr('fill', ink).attr('fill-opacity', 0.7);
+                    .style('fill', ink).style('fill-opacity', 0.7);
             }
             caption('Consensus identity (n = ' + n + ')', consTop + 9);
             for (let i = 0; i < visible; ++i) {
@@ -8107,7 +8216,7 @@ function (root, d3, forester, phyloXml) {
                 }
                 strip.append('text').attr('x', Math.round(originX + (i * cw)) + (cw / 2))
                     .attr('y', consTop + MSA_CONS_BAR_H + 10)
-                    .attr('text-anchor', 'middle')
+                    .style('text-anchor', 'middle')
                     .style('font-family', 'monospace').style('font-size', '8px')
                     .style('fill', ink)
                     .text(cc);
@@ -8119,7 +8228,7 @@ function (root, d3, forester, phyloXml) {
         let rulerY = consTop + (logo ? MSA_LOGO_CAP_H + MSA_LOGO_H : MSA_CONS_BAR_H + MSA_CONS_ROW_H);
         strip.append('line').attr('x1', Math.round(originX)).attr('x2', Math.round(originX) + trackW)
             .attr('y1', rulerY).attr('y2', rulerY)
-            .attr('stroke', ink).attr('stroke-opacity', 0.8).attr('stroke-width', 1);
+            .style('stroke', ink).style('stroke-opacity', 0.8).style('stroke-width', 1);
         let lastRight = -Infinity;
         let drawTick = function (c, force) {
             let i = c - 1 - offset;
@@ -8128,11 +8237,11 @@ function (root, d3, forester, phyloXml) {
             }
             let x = Math.round(originX + (i * cw)) + (cw / 2);
             strip.append('line').attr('x1', x).attr('x2', x).attr('y1', rulerY).attr('y2', rulerY + 4)
-                .attr('stroke', ink).attr('stroke-opacity', 0.8).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-opacity', 0.8).style('stroke-width', 1);
             let label = String(c);
             let half = label.length * 2.8;
             if (force || (x - half) >= (lastRight + 4)) {
-                strip.append('text').attr('x', x).attr('y', rulerY + 14).attr('text-anchor', 'middle')
+                strip.append('text').attr('x', x).attr('y', rulerY + 14).style('text-anchor', 'middle')
                     .style('font-size', '9px').style('fill', ink)
                     .text(label);
                 lastRight = x + half;
@@ -8149,7 +8258,7 @@ function (root, d3, forester, phyloXml) {
         g.append('rect').attr('class', 'aptx-msa-hover')
             .attr('x', Math.round(originX)).attr('y', rowsTop)
             .attr('width', trackW).attr('height', Math.max(1, rowsBottom - rowsTop))
-            .attr('fill', 'transparent')
+            .style('fill', 'transparent')
             .on('mousemove', msaHoverMove)
             .on('mouseout', msaHoverOut)
             .on('wheel', function (event) {
@@ -8651,10 +8760,14 @@ function (root, d3, forester, phyloXml) {
     // that came and went with the zoom level. Both strokes are a constant
     // screen width, so a zoom neither fattens nor loses them.
     function paintHeatmapCell(el, fill, bordered) {
-        el.attr('fill', fill)
-            .attr('stroke', bordered ? heatmapBorderColor(fill) : fill)
-            .attr('stroke-width', bordered ? HEATMAP_BORDER_W : HEATMAP_SEAL_W)
-            .attr('vector-effect', 'non-scaling-stroke');
+        el.style('fill', fill)
+            .style('stroke', bordered ? heatmapBorderColor(fill) : fill)
+            .style('stroke-width', bordered ? HEATMAP_BORDER_W : HEATMAP_SEAL_W)
+            // ... said twice: as a style for the page, as everything here is,
+            // and as an attribute for canvg, which draws the PNG and reads this
+            // from the attribute alone (as a style only, every border came out
+            // at the export's scale, four times as wide)
+            .style('vector-effect', 'non-scaling-stroke').attr('vector-effect', 'non-scaling-stroke');
         return el;
     }
 
@@ -8784,8 +8897,8 @@ function (root, d3, forester, phyloXml) {
                 let rect = g.append('rect').attr('x', x0).attr('y', cy)
                     .attr('width', Math.max(1, x1 - x0)).attr('height', rh);
                 if (runFill === HEATMAP_BLANK) {
-                    rect.attr('fill', _state.backgroundColorDefault)
-                        .attr('stroke', ink).attr('stroke-opacity', 0.45).attr('stroke-width', 1);
+                    rect.style('fill', _state.backgroundColorDefault)
+                        .style('stroke', ink).style('stroke-opacity', 0.45).style('stroke-width', 1);
                 } else {
                     paintHeatmapCell(rect, runFill, bordered);
                 }
@@ -8817,8 +8930,8 @@ function (root, d3, forester, phyloXml) {
         g.append('rect')
             .attr('x', Math.round(originX)).attr('y', rowsTop)
             .attr('width', trackW).attr('height', Math.max(1, rowsBottom - rowsTop))
-            .attr('fill', 'none')
-            .attr('stroke', ink).attr('stroke-opacity', 0.55).attr('stroke-width', 1);
+            .style('fill', 'none')
+            .style('stroke', ink).style('stroke-opacity', 0.55).style('stroke-width', 1);
 
         // ---- the clustering behind the column order, above the grid ----
         // Drawn with the cells, in the tree's own group, so it zooms, pans and
@@ -8871,9 +8984,9 @@ function (root, d3, forester, phyloXml) {
             }
             g.append('path').attr('class', 'aptx-heatmap-dendro')
                 .attr('d', path)
-                .attr('fill', 'none')
-                .attr('stroke', ink)
-                .attr('stroke-width', Math.max(1, _state.branchWidthDefault))
+                .style('fill', 'none')
+                .style('stroke', ink)
+                .style('stroke-width', Math.max(1, _state.branchWidthDefault))
                 .style('pointer-events', 'none');
         }
 
@@ -8902,9 +9015,9 @@ function (root, d3, forester, phyloXml) {
                 g.append('line')
                     .attr('x1', from).attr('x2', guideEnd)
                     .attr('y1', d.x).attr('y2', d.x)
-                    .attr('stroke', ink)
-                    .attr('stroke-width', 1)
-                    .attr('stroke-dasharray', '2,3')
+                    .style('stroke', ink)
+                    .style('stroke-width', 1)
+                    .style('stroke-dasharray', '2,3')
                     .style('stroke-opacity', 0.35)
                     .style('pointer-events', 'none');
             }
@@ -8916,7 +9029,7 @@ function (root, d3, forester, phyloXml) {
         let strip = floatStripGroup('aptx-heatmap-strip', _clusterH, heatmapBottomReserve());
         strip.append('rect').attr('x', Math.round(originX) - 2).attr('y', _clusterH)
             .attr('width', trackW + 4).attr('height', heatmapStripHeight())
-            .attr('fill', _state.backgroundColorDefault);
+            .style('fill', _state.backgroundColorDefault);
         let labelTop = _clusterH + HEATMAP_HEAD_GAP;
         let headH = heatmapHeadHeight();
         if (headH > 0) {
@@ -8927,7 +9040,7 @@ function (root, d3, forester, phyloXml) {
                     .attr('transform', 'translate(' + (originX + (i * cw) + (cw / 2)) + ','
                         + labelTop + ') rotate(-90)')
                     .attr('dy', '0.32em')
-                    .attr('text-anchor', 'end')
+                    .style('text-anchor', 'end')
                     .style('font', font)
                     .style('fill', _state.labelColorDefault)
                     .text(clipTextToWidth(col.label, font, HEATMAP_LABEL_MAX_PX));
@@ -8944,20 +9057,20 @@ function (root, d3, forester, phyloXml) {
         VIS_COLOR_RAMP.forEach(function (c, i) {
             grad.append('stop')
                 .attr('offset', ((i * 100) / (VIS_COLOR_RAMP.length - 1)) + '%')
-                .attr('stop-color', c);
+                .style('stop-color', c);
         });
         strip.append('rect')
             .attr('x', Math.round(originX)).attr('y', scaleTop)
             .attr('width', barW).attr('height', HEATMAP_SCALE_BAR_H)
-            .attr('fill', 'url(#' + gradId + ')')
-            .attr('stroke', ink).attr('stroke-opacity', 0.5).attr('stroke-width', 1);
+            .style('fill', 'url(#' + gradId + ')')
+            .style('stroke', ink).style('stroke-opacity', 0.5).style('stroke-width', 1);
         let numY = scaleTop + HEATMAP_SCALE_BAR_H + 10;
         strip.append('text').attr('x', Math.round(originX)).attr('y', numY)
-            .attr('text-anchor', 'start')
+            .style('text-anchor', 'start')
             .style('font-size', '9px').style('fill', ink)
             .text(heatmapNum(model.min));
         strip.append('text').attr('x', Math.round(originX) + barW).attr('y', numY)
-            .attr('text-anchor', 'end')
+            .style('text-anchor', 'end')
             .style('font-size', '9px').style('fill', ink)
             .text(heatmapNum(model.max));
         // the caption: what the matrix is showing, and -- when it is windowed
@@ -8975,11 +9088,11 @@ function (root, d3, forester, phyloXml) {
             if ((rightEdge - cursor) >= keyW) {
                 strip.append('rect').attr('x', cursor).attr('y', scaleTop)
                     .attr('width', HEATMAP_SCALE_BAR_H).attr('height', HEATMAP_SCALE_BAR_H)
-                    .attr('fill', _state.backgroundColorDefault)
-                    .attr('stroke', ink).attr('stroke-opacity', 0.45).attr('stroke-width', 1);
+                    .style('fill', _state.backgroundColorDefault)
+                    .style('stroke', ink).style('stroke-opacity', 0.45).style('stroke-width', 1);
                 strip.append('text').attr('x', cursor + HEATMAP_SCALE_BAR_H + 4)
                     .attr('y', scaleTop + HEATMAP_SCALE_BAR_H)
-                    .attr('text-anchor', 'start')
+                    .style('text-anchor', 'start')
                     .style('font', capFont).style('fill', ink).style('fill-opacity', 0.85)
                     .text(HEATMAP_NOT_ASSESSED);
                 cursor += keyW + 10;
@@ -8987,7 +9100,7 @@ function (root, d3, forester, phyloXml) {
         }
         if ((rightEdge - cursor) > 60) {
             strip.append('text').attr('x', cursor).attr('y', scaleTop + HEATMAP_SCALE_BAR_H)
-                .attr('text-anchor', 'start')
+                .style('text-anchor', 'start')
                 .style('font', capFont).style('fill', ink).style('fill-opacity', 0.85)
                 .text(clipTextToWidth(caption, capFont, rightEdge - cursor));
         }
@@ -8996,7 +9109,7 @@ function (root, d3, forester, phyloXml) {
         g.append('rect').attr('class', 'aptx-heatmap-hover')
             .attr('x', Math.round(originX)).attr('y', rowsTop)
             .attr('width', trackW).attr('height', Math.max(1, rowsBottom - rowsTop))
-            .attr('fill', 'transparent')
+            .style('fill', 'transparent')
             .on('mousemove', heatmapHoverMove)
             .on('mouseout', heatmapHoverOut)
             .on('wheel', function (event) {
@@ -9138,12 +9251,12 @@ function (root, d3, forester, phyloXml) {
                 let path = g.append('path')
                     .attr('d', heatmapSector(edge[runStart], a1, r0, r1 + bleed));
                 if (runFill === HEATMAP_BLANK) {
-                    path.attr('fill', _state.backgroundColorDefault)
-                        .attr('stroke', ink).attr('stroke-opacity', 0.45).attr('stroke-width', 1);
+                    path.style('fill', _state.backgroundColorDefault)
+                        .style('stroke', ink).style('stroke-opacity', 0.45).style('stroke-width', 1);
                 } else if (bordered) {
                     paintHeatmapCell(path, runFill, true);
                 } else {
-                    path.attr('fill', runFill);   // the bleed already closes the seams here
+                    path.style('fill', runFill);   // the bleed already closes the seams here
                 }
                 runStart = -1;
                 runFill = null;
@@ -9169,7 +9282,7 @@ function (root, d3, forester, phyloXml) {
         [start, start + (columns.length * ringW)].forEach(function (r) {
             g.append('path')
                 .attr('d', heatmapSector(edge[0], edge[n], r - 0.5, r + 0.5))
-                .attr('fill', ink).attr('fill-opacity', 0.5);
+                .style('fill', ink).style('fill-opacity', 0.5);
         });
 
         // Each ring's name, laid along the ring at the fan's seam -- the gap
@@ -9193,7 +9306,7 @@ function (root, d3, forester, phyloXml) {
                 g.append('text')
                     .attr('transform', 'translate(' + xy[0].toFixed(1) + ',' + xy[1].toFixed(1) + ') '
                         + 'rotate(' + (deg + (flip ? 180 : 0)).toFixed(1) + ')')
-                    .attr('text-anchor', 'middle')
+                    .style('text-anchor', 'middle')
                     .attr('dy', '0.32em')
                     .style('font', font)
                     .style('fill', _state.labelColorDefault)
@@ -9205,7 +9318,7 @@ function (root, d3, forester, phyloXml) {
         g.append('path')
             .attr('class', 'aptx-heatmap-hover')
             .attr('d', heatmapSector(edge[0], edge[n], start, start + (columns.length * ringW)))
-            .attr('fill', 'transparent')
+            .style('fill', 'transparent')
             .on('mousemove', heatmapHoverMove)
             .on('mouseout', heatmapHoverOut);
 
@@ -9259,31 +9372,31 @@ function (root, d3, forester, phyloXml) {
         VIS_COLOR_RAMP.forEach(function (c, i) {
             grad.append('stop')
                 .attr('offset', ((i * 100) / (VIS_COLOR_RAMP.length - 1)) + '%')
-                .attr('stop-color', c);
+                .style('stop-color', c);
         });
         let barY = y + PAD;
         g.append('rect').attr('x', x + PAD).attr('y', barY)
             .attr('width', BAR_W).attr('height', HEATMAP_SCALE_BAR_H)
-            .attr('fill', 'url(#' + gradId + ')')
-            .attr('stroke', frame).attr('stroke-opacity', 0.5).attr('stroke-width', 1);
+            .style('fill', 'url(#' + gradId + ')')
+            .style('stroke', frame).style('stroke-opacity', 0.5).style('stroke-width', 1);
         let line = barY + HEATMAP_SCALE_BAR_H + FS + 2;
-        g.append('text').attr('x', x + PAD).attr('y', line).attr('text-anchor', 'start')
+        g.append('text').attr('x', x + PAD).attr('y', line).style('text-anchor', 'start')
             .style('font', capFont).style('fill', ink).text(heatmapNum(m.min));
-        g.append('text').attr('x', x + PAD + BAR_W).attr('y', line).attr('text-anchor', 'end')
+        g.append('text').attr('x', x + PAD + BAR_W).attr('y', line).style('text-anchor', 'end')
             .style('font', capFont).style('fill', ink).text(heatmapNum(m.max));
         if (blanks) {
             line += FS + 4;
             g.append('rect').attr('x', x + PAD).attr('y', line - HEATMAP_SCALE_BAR_H)
                 .attr('width', HEATMAP_SCALE_BAR_H).attr('height', HEATMAP_SCALE_BAR_H)
-                .attr('fill', _state.backgroundColorDefault)
-                .attr('stroke', frame).attr('stroke-opacity', 0.45).attr('stroke-width', 1);
+                .style('fill', _state.backgroundColorDefault)
+                .style('stroke', frame).style('stroke-opacity', 0.45).style('stroke-width', 1);
             g.append('text').attr('x', x + PAD + HEATMAP_SCALE_BAR_H + 4).attr('y', line)
-                .attr('text-anchor', 'start')
+                .style('text-anchor', 'start')
                 .style('font', capFont).style('fill', ink).style('fill-opacity', 0.85)
                 .text(HEATMAP_NOT_ASSESSED);
         }
         line += FS + 4;
-        g.append('text').attr('x', x + PAD).attr('y', line).attr('text-anchor', 'start')
+        g.append('text').attr('x', x + PAD).attr('y', line).style('text-anchor', 'start')
             .style('font', capFont).style('fill', ink).style('fill-opacity', 0.85)
             .text(caption);
     }
@@ -9878,7 +9991,7 @@ function (root, d3, forester, phyloXml) {
             let gap = _state.nodeLabelGap;
             let flip = radialDisplay() && labelFlip(d);
             if (_state.circularDisplay && _radial) {
-                t.attr('text-anchor', flip ? 'end' : 'start')
+                t.style('text-anchor', flip ? 'end' : 'start')
                     .attr('x', flip ? -gap : gap).attr('dy', '0.32em');
                 if (_radialLabelsHorizontal) {
                     let p = radialXY(d.x, d.y);
@@ -9891,12 +10004,12 @@ function (root, d3, forester, phyloXml) {
             } else if (radialDisplay()) {
                 let r = radialRadius(far) - radialRadius(d.y) + gap;
                 t.attr('transform', 'rotate(' + labelAngleDeg(d) + ') translate(' + r + ',0)' + (flip ? ' rotate(180)' : ''))
-                    .attr('text-anchor', flip ? 'end' : 'start')
+                    .style('text-anchor', flip ? 'end' : 'start')
                     .attr('x', 0).attr('dy', '0.32em');
             } else {
                 let column = (_state.phylogram && _state.alignPhylogram) ? _w : far;
                 t.attr('transform', null)
-                    .attr('text-anchor', 'start')
+                    .style('text-anchor', 'start')
                     .attr('x', column - d.y + gap)
                     .attr('dy', (0.3 * fs) + 'px');
             }
@@ -10370,7 +10483,7 @@ function (root, d3, forester, phyloXml) {
         try {
             _settings.onViewChange(state, encoded);
         } catch (e) {
-            console.error(ERROR + 'onViewChange threw: ' + (e && e.message ? e.message : e));
+            say('problem', 'error', ERROR + 'onViewChange threw: ' + (e && e.message ? e.message : e));
         }
     }
 
@@ -11163,6 +11276,9 @@ function (root, d3, forester, phyloXml) {
         let svg = clockSvg(body, 'svg', 'aptx-clock-svg');
         svg.setAttribute('width', CLOCK_PLOT_W);
         svg.setAttribute('height', CLOCK_PLOT_H);
+        // inline as well: an attribute gives way to a page's rule for a bare "svg" (sizeTreeSvg)
+        svg.style.width = CLOCK_PLOT_W + 'px';
+        svg.style.height = CLOCK_PLOT_H + 'px';
         svg.setAttribute('viewBox', '0 0 ' + CLOCK_PLOT_W + ' ' + CLOCK_PLOT_H);
         svg.setAttribute('role', 'img');
         svg.setAttribute('aria-label', 'Clock plot: each tip\'s date against its divergence from the root');
@@ -11489,7 +11605,7 @@ function (root, d3, forester, phyloXml) {
             let t = clockSvg(cp.axes, 'text', cls);
             t.setAttribute('x', tx);
             t.setAttribute('y', ty);
-            t.setAttribute('text-anchor', anchor);
+            t.style.setProperty('text-anchor', anchor);
             t.textContent = s;
             return t;
         };
@@ -12282,8 +12398,8 @@ function (root, d3, forester, phyloXml) {
                 made[id] = true;
                 let grad = d3.select(defs).append('linearGradient').attr('id', id)
                     .attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 1);
-                grad.append('stop').attr('offset', '0%').attr('stop-color', forester.domainLighten(base, 0.12));
-                grad.append('stop').attr('offset', '100%').attr('stop-color', forester.domainDarken(base, 0.10));
+                grad.append('stop').attr('offset', '0%').style('stop-color', forester.domainLighten(base, 0.12));
+                grad.append('stop').attr('offset', '100%').style('stop-color', forester.domainDarken(base, 0.10));
             }
             return 'url(#' + id + ')';
         }
@@ -12464,7 +12580,7 @@ function (root, d3, forester, phyloXml) {
             el.setAttribute('x', t.x);
             el.setAttribute('y', t.y);
             el.setAttribute('dy', '0.35em');
-            el.setAttribute('text-anchor', 'middle');
+            el.style.setProperty('text-anchor', 'middle');
             el.style.font = t.font;
             el.style.fill = t.fill;
             el.textContent = t.text;
@@ -13177,7 +13293,7 @@ function (root, d3, forester, phyloXml) {
             el.setAttribute('x', t.x);
             el.setAttribute('y', t.y);
             el.setAttribute('dy', '0.35em');
-            el.setAttribute('text-anchor', 'middle');
+            el.style.setProperty('text-anchor', 'middle');
             el.style.font = t.font;
             el.style.fill = t.fill;
             el.textContent = t.text;
@@ -13592,7 +13708,7 @@ function (root, d3, forester, phyloXml) {
         });
         g.append('text')
             .attr('x', x + (bar.px / 2)).attr('y', y - 6)
-            .attr('text-anchor', 'middle')
+            .style('text-anchor', 'middle')
             .style('font', fs + 'px ' + FONT_DEFAULTS)
             .style('fill', _state.labelColorDefault)
             .text(bar.label);
@@ -13671,8 +13787,8 @@ function (root, d3, forester, phyloXml) {
         function gridLineAt(x) {
             grid.append('line').attr('x1', x).attr('x2', x)
                 .attr('y1', 0).attr('y2', axisTop)
-                .attr('stroke', ink).attr('stroke-opacity', 0.18)
-                .attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-opacity', 0.18)
+                .style('stroke-width', 1);
         }
 
         let sc = info.type === 'calendar' ? -corr : corr;
@@ -13692,11 +13808,11 @@ function (root, d3, forester, phyloXml) {
                 let p1 = polarXY(a, radialRadius(x1));
                 el = g.append('line').attr('x1', p0[0]).attr('y1', p0[1])
                     .attr('x2', p1[0]).attr('y2', p1[1])
-                    .attr('stroke', fill).attr('stroke-width', thick);
+                    .style('stroke', fill).style('stroke-width', thick);
             } else {
                 el = g.append('rect').attr('x', Math.min(x0, x1)).attr('y', d.x - (thick / 2))
                     .attr('width', Math.max(1, Math.abs(x1 - x0))).attr('height', thick)
-                    .attr('fill', fill);
+                    .style('fill', fill);
             }
             el.datum(d).attr('class', cls);
         }
@@ -13715,7 +13831,7 @@ function (root, d3, forester, phyloXml) {
                 q = [x, d.x + 4];
             }
             g.append('line').attr('x1', p[0]).attr('y1', p[1]).attr('x2', q[0]).attr('y2', q[1])
-                .attr('stroke', FOSSIL_BAR_COLOR).attr('stroke-width', 1)
+                .style('stroke', FOSSIL_BAR_COLOR).style('stroke-width', 1)
                 .datum(d).attr('class', 'aptx-fossil-cap');
         }
 
@@ -13787,7 +13903,7 @@ function (root, d3, forester, phyloXml) {
             let left = Math.min(x0, x1);
             ax.append('rect').attr('x', left - 2).attr('y', axisTop - 4)
                 .attr('width', Math.abs(x1 - x0) + 4).attr('height', scaleAxisBottomReserve() + 4)
-                .attr('fill', _state.backgroundColorDefault);
+                .style('fill', _state.backgroundColorDefault);
         }
         if (info.type === 'geologic') {
             let rootAge = info.rootAge;
@@ -13828,11 +13944,11 @@ function (root, d3, forester, phyloXml) {
                     }
                     ax.append('rect').attr('x', left).attr('y', rowY)
                         .attr('width', w).attr('height', TIME_BAND_ROW_H)
-                        .attr('fill', iv.color)
-                        .attr('stroke', ink).attr('stroke-opacity', 0.5).attr('stroke-width', 0.5);
+                        .style('fill', iv.color)
+                        .style('stroke', ink).style('stroke-opacity', 0.5).style('stroke-width', 0.5);
                     if ((iv.name.length * 5.5) + 4 <= w) {
                         ax.append('text').attr('x', left + (w / 2)).attr('y', rowY + TIME_BAND_ROW_H - 3.5)
-                            .attr('text-anchor', 'middle')
+                            .style('text-anchor', 'middle')
                             .style('font-size', '9px')
                             .style('fill', forester.msaLetterInk(hexToRgbTriple(iv.color)))
                             .text(iv.name);
@@ -13843,7 +13959,7 @@ function (root, d3, forester, phyloXml) {
             let rulerY = axisTop + (2 * TIME_BAND_ROW_H) + 4;
             ax.append('line').attr('x1', xOfAge(rootAge)).attr('x2', xOfAge(youngBound))
                 .attr('y1', rulerY).attr('y2', rulerY)
-                .attr('stroke', ink).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-width', 1);
             let labels = [];
             forester.maAxisTickValues(rootAge).forEach(function (v) {
                 if (v >= youngBound - 1e-9 && v <= rootAge + 1e-9) {
@@ -13863,7 +13979,7 @@ function (root, d3, forester, phyloXml) {
                 let x = xOfAge(l.age);
                 ax.append('line').attr('x1', x).attr('x2', x)
                     .attr('y1', rulerY).attr('y2', rulerY + 4)
-                    .attr('stroke', ink).attr('stroke-width', 1);
+                    .style('stroke', ink).style('stroke-width', 1);
                 let text = String(l.age);
                 let half = text.length * 2.8;
                 let ok = true;
@@ -13875,14 +13991,14 @@ function (root, d3, forester, phyloXml) {
                 }
                 if (ok || l.priority > 0) {
                     ax.append('text').attr('x', x).attr('y', rulerY + 14)
-                        .attr('text-anchor', 'middle')
+                        .style('text-anchor', 'middle')
                         .style('font-size', '9px').style('fill', ink)
                         .text(text);
                     placed.push(x);
                 }
             });
             ax.append('text').attr('x', xOfAge(youngBound) + 8).attr('y', rulerY + 14)
-                .attr('text-anchor', 'start')
+                .style('text-anchor', 'start')
                 .style('font-size', '9px').style('fill', ink)
                 .text('Ma');
         } else {
@@ -13911,18 +14027,18 @@ function (root, d3, forester, phyloXml) {
             let rulerY = axisTop + 4;
             ax.append('line').attr('x1', xOfYear(rootYear)).attr('x2', xOfYear(present))
                 .attr('y1', rulerY).attr('y2', rulerY)
-                .attr('stroke', ink).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-width', 1);
             let lastRight = -Infinity;
             forester.calendarTickYears(rootYear, present).forEach(function (yv) {
                 let x = xOfYear(yv);
                 ax.append('line').attr('x1', x).attr('x2', x)
                     .attr('y1', rulerY).attr('y2', rulerY + 4)
-                    .attr('stroke', ink).attr('stroke-width', 1);
+                    .style('stroke', ink).style('stroke-width', 1);
                 let text = String(Math.round(yv));
                 let half = text.length * 2.8;
                 if ((x - half) >= lastRight + 4) {
                     ax.append('text').attr('x', x).attr('y', rulerY + 14)
-                        .attr('text-anchor', 'middle')
+                        .style('text-anchor', 'middle')
                         .style('font-size', '9px').style('fill', ink)
                         .text(text);
                     lastRight = x + half;
@@ -14016,15 +14132,15 @@ function (root, d3, forester, phyloXml) {
                 return;
             }
             behind.append('path').attr('d', ring.innerRadius(a).outerRadius(b)())
-                .attr('fill', iv.color).attr('fill-opacity', 0.35);
+                .style('fill', iv.color).style('fill-opacity', 0.35);
             named.push({r: (a + b) / 2, span: b - a, text: iv.name, color: iv.color});
         });
         if (grid) {
             ticks.forEach(function (t) {
                 let r = radiusOf(t.value);
                 if (r > r0 + 0.5 && r < r1 - 0.5) {
-                    grid.append('circle').attr('r', r).attr('fill', 'none')
-                        .attr('stroke', ink).attr('stroke-opacity', 0.18).attr('stroke-width', 1);
+                    grid.append('circle').attr('r', r).style('fill', 'none')
+                        .style('stroke', ink).style('stroke-opacity', 0.18).style('stroke-width', 1);
                 }
             });
         }
@@ -14043,7 +14159,7 @@ function (root, d3, forester, phyloXml) {
         let e0 = at(r0, 0);
         let e1 = at(r1, 0);
         ax.append('line').attr('x1', e0[0]).attr('y1', e0[1]).attr('x2', e1[0]).attr('y2', e1[1])
-            .attr('stroke', ink).attr('stroke-width', 1);
+            .style('stroke', ink).style('stroke-width', 1);
         // numbers on one side of the ruler, interval names on the other; the
         // headline value first, then the round ticks outward, none overlapping
         function label(r, off, text, fill, backdrop) {
@@ -14053,9 +14169,9 @@ function (root, d3, forester, phyloXml) {
             let w = text.length * 5.5;
             if (backdrop) {
                 t.append('rect').attr('x', -(w / 2) - 2).attr('y', -6).attr('width', w + 4).attr('height', 12)
-                    .attr('rx', 2).attr('fill', _state.backgroundColorDefault).attr('fill-opacity', 0.85);
+                    .attr('rx', 2).style('fill', _state.backgroundColorDefault).style('fill-opacity', 0.85);
             }
-            t.append('text').attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
+            t.append('text').style('text-anchor', 'middle').style('dominant-baseline', 'central')
                 .style('font-size', '9px').style('fill', fill).text(text);
         }
         let side = flip ? -1 : 1;
@@ -14068,7 +14184,7 @@ function (root, d3, forester, phyloXml) {
             let c0 = at(r, -4);
             let c1 = at(r, 4);
             ax.append('line').attr('x1', c0[0]).attr('y1', c0[1]).attr('x2', c1[0]).attr('y2', c1[1])
-                .attr('stroke', ink).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-width', 1);
             let half = t.text.length * 2.8;
             for (let i = 0; i < placed.length; ++i) {
                 if (Math.abs(placed[i] - r) < (half * 2) + 6) {
@@ -14142,8 +14258,8 @@ function (root, d3, forester, phyloXml) {
                 if (v > 0 && v < maxDist - 1e-9) {
                     grid.append('line').attr('x1', xOf(v)).attr('x2', xOf(v))
                         .attr('y1', 0).attr('y2', axisTop)
-                        .attr('stroke', ink).attr('stroke-opacity', 0.18)
-                        .attr('stroke-width', 1);
+                        .style('stroke', ink).style('stroke-opacity', 0.18)
+                        .style('stroke-width', 1);
                 }
             });
         }
@@ -14155,23 +14271,23 @@ function (root, d3, forester, phyloXml) {
         // opaque, as the time axis's, so tips panned under it do not show
         ax.append('rect').attr('x', x0 - 2).attr('y', axisTop - 4)
             .attr('width', (x1 - x0) + 4).attr('height', reserve + 4)
-            .attr('fill', _state.backgroundColorDefault);
+            .style('fill', _state.backgroundColorDefault);
         let rulerY = axisTop + 4;
         ax.append('line').attr('x1', x0).attr('x2', x1)
             .attr('y1', rulerY).attr('y2', rulerY)
-            .attr('stroke', ink).attr('stroke-width', 1);
+            .style('stroke', ink).style('stroke-width', 1);
         // every tick drawn, its number only where it clears the last one
         let lastRight = -Infinity;
         ticks.forEach(function (v) {
             let x = xOf(v);
             ax.append('line').attr('x1', x).attr('x2', x)
                 .attr('y1', rulerY).attr('y2', rulerY + 4)
-                .attr('stroke', ink).attr('stroke-width', 1);
+                .style('stroke', ink).style('stroke-width', 1);
             let text = String(v);
             let half = text.length * 2.8;
             if ((x - half) >= lastRight + 4) {
                 ax.append('text').attr('x', x).attr('y', rulerY + 14)
-                    .attr('text-anchor', 'middle')
+                    .style('text-anchor', 'middle')
                     .style('font-size', '9px').style('fill', ink)
                     .text(text);
                 lastRight = x + half;
@@ -14181,7 +14297,7 @@ function (root, d3, forester, phyloXml) {
             // past the ruler's end, and past the last number, which is
             // centred on that end
             ax.append('text').attr('x', Math.max(x1 + 8, lastRight + 6)).attr('y', rulerY + 14)
-                .attr('text-anchor', 'start')
+                .style('text-anchor', 'start')
                 .style('font-size', '9px').style('fill', ink)
                 .text(unit);
         }
@@ -14763,8 +14879,7 @@ function (root, d3, forester, phyloXml) {
                 _displayHeight = size.h;
                 // the canvas has to follow, or the layout is computed for one
                 // size and drawn on another
-                _baseSvg.attr('width', size.w);
-                _baseSvg.attr('height', size.h);
+                sizeTreeSvg(_baseSvg, size.w, size.h);
             }
         }
         // Where the user dragged the legend to is their choice; a resize is no
@@ -15904,14 +16019,17 @@ function (root, d3, forester, phyloXml) {
     // The async clipboard API where the page allows it (a secure context);
     // otherwise the old select-and-copy, so a page served over plain http
     // still copies. Resolves to whether the text made it.
-    function copyText(text) {
+    //
+    // `host` is the open modal dialog the copy is made from, if any: under a
+    // modal everything outside it is inert, a textarea on the body included.
+    function copyText(text, host) {
         let legacy = function () {
             let ta = document.createElement('textarea');
             ta.value = text;
             ta.setAttribute('readonly', '');
             ta.style.position = 'fixed';
             ta.style.left = '-10000px';
-            document.body.appendChild(ta);
+            (host || document.body).appendChild(ta);
             ta.select();
             let ok = false;
             try {
@@ -16650,9 +16768,11 @@ function (root, d3, forester, phyloXml) {
             case 'moon': body = glyphMoon(); break;
             default: throw new Error('unknown control-panel glyph: ' + kind);
         }
-        return '<svg class="aptx-glyph" viewBox="0 0 ' + w + ' 100" aria-hidden="true" focusable="false"'
+        // written as an svg file would be, its paint in attributes; paintInline
+        // makes inline styles of it, which no rule of a page outranks
+        return paintInline('<svg class="aptx-glyph" viewBox="0 0 ' + w + ' 100" aria-hidden="true" focusable="false"'
             + ' fill="none" stroke="currentColor" stroke-width="' + sw + '"'
-            + ' stroke-linecap="' + cap + '" stroke-linejoin="' + join + '">' + body + '</svg>';
+            + ' stroke-linecap="' + cap + '" stroke-linejoin="' + join + '">' + body + '</svg>');
     }
 
     // The desktop's UNCOLLAPSE_ALL glyph (ControlButtonIcon.paintUncollapse),
@@ -16669,6 +16789,214 @@ function (root, d3, forester, phyloXml) {
             + '<path d="M56,20 H94 M56,50 H94 M56,80 H94"/>';
     }
 
+    // ===================== A host page's stylesheet =====================
+    // The viewer is drawn inside somebody else's page, under that page's
+    // stylesheet, and a rule of the host's wins wherever this sheet says
+    // nothing. BV-BRC, 2026-10-09: ".Phylogeny svg { background:#FFFFFF }",
+    // written when the only svg in that widget was the tree, put a white box
+    // behind every icon of the panel. Measured after that, on pages nobody
+    // had tried: a page set in capitals, or centred, set the dialogs and the
+    // tooltip that way too; and under "* { box-sizing: border-box }", which
+    // most pages have, the tooltip came out 22 px narrower.
+    //
+    // So the sheet opens by saying what it used to leave unsaid. These rules
+    // come FIRST, and the general ones carry as little weight as will do:
+    // every rule after them still has the last word. What they cannot do is
+    // outrank a rule of the host's that is heavier still: one scoped by an
+    // id, or by more classes than the rule here has, or marked !important.
+    //
+    // test/browser/host_css.html launches the viewer under real host sheets
+    // and fails on any difference from a clean page. Something new that the
+    // viewer hangs on the page goes into HOST_PROOF_ROOTS, and through it.
+    const HOST_PROOF_ROOTS = ['.aptx-panel', '.aptx-dialog', '.aptx-node-menu', '.aptx-suggest', '.aptx-tip',
+        '.aptx-busy', '.aptx-msa-nav'];
+    // What paints a shape or sets a text, what shows or hides it, and what
+    // would animate it: the properties a page's rule for a bare "path", "rect"
+    // or "text" is likely to set. An svg ATTRIBUTE for one of these gives way
+    // to any such rule, so the viewer states them as inline styles, and its
+    // sheet says, for every shape of its svgs, "as a page that says nothing
+    // has it" -- which for most of them is what the shape's parent has, and
+    // so, in the end, what the svg itself has: the value beside each name,
+    // where a parent hands it down. (Without one: not handed down; or stated
+    // by the svg's own rule; or left to the page on purpose, as the cursor
+    // and whether the thing is shown at all.)
+    //
+    // It also means that an ATTRIBUTE for one of these, on a shape of the
+    // viewer's, no longer does anything, in any page: test/
+    // visualization_test.js holds the drawing code to that, and test/browser/
+    // host_css.html the page (with these rules taken out, nothing changes).
+    // Markup with its paint in attributes goes through paintInline.
+    //
+    // Not here, and still attributes: where a shape is and how large (x, y,
+    // d, r, transform), clip-path and mask.
+    const SHAPE_PAINT = {
+        'fill': '#000', 'fill-opacity': '1', 'fill-rule': 'nonzero',
+        'stroke': 'none', 'stroke-width': '1', 'stroke-opacity': '1', 'stroke-dasharray': 'none',
+        'stroke-dashoffset': '0', 'stroke-linecap': 'butt', 'stroke-linejoin': 'miter', 'stroke-miterlimit': '4',
+        'paint-order': 'normal', 'text-anchor': 'start', 'dominant-baseline': 'auto', 'shape-rendering': 'auto',
+        'vector-effect': null, 'stop-color': null, 'stop-opacity': null, 'opacity': null, 'filter': null,
+        'mix-blend-mode': null, 'display': null, 'visibility': null, 'cursor': null, 'pointer-events': null,
+        'color': null, 'font': null, 'letter-spacing': null, 'word-spacing': null, 'text-transform': null,
+        'text-decoration': null, 'text-shadow': null, 'text-rendering': null, 'white-space': null,
+        'transition': null, 'animation': null
+    };
+    // What of that paint a FILE states as attributes again (paintAsAttributes,
+    // for the SVG, PNG and PDF downloads). A file has no page to hold its
+    // ground against, and not every program that opens one reads a style as
+    // well as it reads an attribute: MuPDF takes a line's colour from a style
+    // and not its opacity, and drew the faint lines of a time axis at full
+    // strength. These are the paint properties SVG 1.1 has as attributes, and
+    // vector-effect, which every release wrote as one. (paint-order is SVG
+    // 2's: it stays the style it always was. So do the fonts.)
+    const FILE_PAINT = ['fill', 'fill-opacity', 'fill-rule', 'stroke', 'stroke-width', 'stroke-opacity',
+        'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit',
+        'text-anchor', 'dominant-baseline', 'shape-rendering', 'vector-effect', 'stop-color', 'stop-opacity',
+        'opacity'];
+    // The paints that are a colour, each with the attribute a colour's alpha
+    // goes to in a file. SVG 1.1 has no colour with an alpha and no
+    // "transparent", and a program that knows neither draws black: MuPDF put
+    // a black slab over a heat map (the surface it listens to the pointer
+    // with) and over every row of a legend, and a solid bar where a node's
+    // age interval is a translucent one.
+    const FILE_ALPHA = {'fill': 'fill-opacity', 'stroke': 'stroke-opacity', 'stop-color': 'stop-opacity'};
+    // every kind of element an svg of the viewer's is made of: the rule names
+    // them one by one, so that a browser never tries it on anything else
+    const SHAPE_ELEMENTS = ['g', 'path', 'line', 'rect', 'circle', 'ellipse', 'polygon', 'polyline', 'text', 'tspan',
+        'textPath', 'use', 'image', 'a', 'defs', 'mask', 'clipPath', 'linearGradient', 'radialGradient', 'stop',
+        'symbol', 'marker', 'pattern', 'title', 'desc'];
+    // Weight without rank. A selector made of element names alone weighs less
+    // than one class however many names it has, so eight names that are no
+    // element's, inside a ":not", make a rule outweigh every rule a page
+    // writes with element names only ("label", "fieldset > legend", "*"),
+    // whichever sheet came first, and still give way to any rule for a class.
+    const ELEMENT_WEIGHT = ':not(' + new Array(8).fill('aptx-none').join(' ') + ')';
+    // Where the browser's own focus ring is what shows the focus (the menus
+    // light the entry instead), and the controls there that draw their own.
+    const FOCUS_RING_ROOTS = ['.aptx-panel', '.aptx-dialog', '.aptx-msa-nav'];
+    // (Every rule of this sheet that sets an outline has its control here: the
+    // rule that gives the ring back outweighs them all, so one left out gets
+    // the browser's ring on top of its own. A colour swatch draws an outline
+    // under the pointer, and keeps the browser's ring otherwise.)
+    const OWN_FOCUS = ['.aptx-cp-hex', '.aptx-reps-input', '.aptx-reorder-row', '.aptx-reps-button',
+        '.aptx-msa-nav-jump', '.aptx-clampable', '.aptx-cp-sw:hover', 'input[type=text]', 'select'];
+
+    // Svg markup as a file has it, its paint in attributes, with that paint
+    // moved into inline styles: an attribute gives way to any rule of the page
+    // the markup is put in, and to the viewer's own "as a page that says
+    // nothing has it" (SHAPE_PAINT). The icons and the logo go through here.
+    // An attribute may say what a style may not: a font given piece by piece,
+    // a size without its unit.
+    function paintInline(markup) {
+        let names = Object.keys(SHAPE_PAINT).concat(['font-family', 'font-size', 'font-style', 'font-weight']);
+        let paint = new RegExp('\\s(' + names.join('|') + ')="([^"]*)"', 'g');
+        return markup.replace(/<([a-zA-Z]+)(\s[^<>]*?)(\/?)>/g, function (all, tag, attributes, closed) {
+            let styles = [];
+            let rest = attributes.replace(paint, function (attribute, name, value) {
+                let unitless = (name === 'font-size' || name === 'letter-spacing' || name === 'word-spacing')
+                    && /^-?[0-9.]+$/.test(value);
+                styles.push(name + ':' + value + (unitless ? 'px' : ''));
+                return '';
+            });
+            if (styles.length === 0) {
+                return all;
+            }
+            // a style the element already has is said after, and so still has the last word
+            let own = '';
+            rest = rest.replace(/\sstyle="([^"]*)"/, function (attribute, value) {
+                own = ';' + value;
+                return '';
+            });
+            return '<' + tag + rest + ' style="' + styles.join(';') + own + '"' + closed + '>';
+        });
+    }
+
+    function hostProofCss() {
+        let roots = HOST_PROOF_ROOTS.join(', ');
+        // (the weight: BV-BRC's rule is ".Phylogeny svg", exactly as heavy as "svg.aptx-tree")
+        let tree = 'svg.' + TREE_SVG_CLASS + ELEMENT_WEIGHT;
+        // Every root and all that is in it (":where" adds no weight), svgs
+        // apart: their shapes are drawn with attributes, which a rule saying
+        // "revert" would undo. The part about the element itself stands last,
+        // where a browser tries it first: a shape of the tree is turned away
+        // at "svg *". (Measured, a whole page's styles worked out again: 8 ms
+        // became 10 on a page of 20,000 elements around the viewer.)
+        let everything = ':where(' + roots + ')' + ELEMENT_WEIGHT
+            + ', :where(' + roots + ') :not(svg, svg *)' + ELEMENT_WEIGHT;
+        // Every shape of every svg of the viewer's: the tree's, the icons',
+        // the logo's, the clock plot's. With the weight of a class, as the
+        // svgs themselves: "rect:hover", "text:first-child" and ".chart text"
+        // all weigh one class and an element. So a rule of this sheet for a
+        // shape names two classes (".aptx-dialog .aptx-clock-grid"), or it
+        // loses to this one.
+        let svgs = ':is(svg.' + TREE_SVG_CLASS + ', ' + HOST_PROOF_ROOTS.map(function (r) {
+            return r + ' svg';
+        }).join(', ') + ')';
+        let shapes = SHAPE_ELEMENTS.map(function (element) {
+            return svgs + ' ' + element + ELEMENT_WEIGHT;
+        }).join(', ');
+        let properties = Object.keys(SHAPE_PAINT);
+        // where a shape's paint starts from, for what it does not state: said on the svg
+        let start = properties.filter(function (name) {
+            return SHAPE_PAINT[name] !== null;
+        }).map(function (name) {
+            return name + ':' + SHAPE_PAINT[name] + ';';
+        }).join(' ');
+        return ''
+            // 1. Everything starts from the browser's own defaults, as in a
+            //    page that says nothing: a reset's "* { box-sizing:border-box }"
+            //    or "button { font: inherit }", a framework's "label { font-
+            //    weight: 700 }". In a page that does say nothing this rule
+            //    changes nothing; and every rule of this sheet for a class,
+            //    here or below, still wins (ELEMENT_WEIGHT).
+            + everything + ' { all:revert; }'
+            //    An svg's own element likewise (its shapes are left alone),
+            //    and with the weight of a class: BV-BRC's rule was a class of
+            //    the page's and "svg". So an svg of the viewer's states its
+            //    size in the sheet or inline, never as attributes alone, and
+            //    its own rule names two classes (or it loses to this one).
+            + ':is(' + roots + ') svg' + ELEMENT_WEIGHT + ' { all:revert; ' + start + ' }'
+            //    And a shape of an svg, in what paints it (SHAPE_PAINT): it
+            //    states that inline, so what a page says of a "path" or a
+            //    "text" is set aside for what the browser has, which for most
+            //    of these is what the shape's parent has.
+            + shapes + ' { ' + properties.join(':revert; ') + ':revert; }'
+            //    Bootstrap 3 names tick boxes by their type, which outweighs
+            //    the rule above: the one tick box here that states no margin
+            //    of its own keeps the browser's, and a disabled one its cursor.
+            + '.aptx-dialog .aptx-reorder-check { margin:revert; }'
+            + '.aptx-dialog input[type=checkbox]:disabled, .aptx-dialog input[type=radio]:disabled { cursor:default; }'
+            // 2. What a page hands down by inheritance stops at each root. The
+            //    values are the ones a page that says nothing has; a root's
+            //    own rule, further down, states its font, size and colour.
+            //    (Left to the page on purpose: direction, cursor, visibility,
+            //    pointer-events.)
+            + roots + ', ' + tree + ' {'
+            + '  color-scheme:light; accent-color:auto; caret-color:auto;'
+            + '  font:400 11px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;'
+            + '  letter-spacing:normal; word-spacing:normal; text-align:start; text-align-last:auto; text-indent:0;'
+            + '  text-transform:none; text-shadow:none; text-rendering:auto;'
+            + '  -webkit-text-size-adjust:auto; text-size-adjust:auto;'
+            + '  white-space:normal; word-break:normal; overflow-wrap:normal; hyphens:manual; tab-size:8;'
+            + '  quotes:auto; list-style:disc outside none; }'
+            // 3. The tree's own svg. Its shapes carry their paint inline; what
+            //    they inherit, and what a rule for a bare "svg" would set, is
+            //    said here. (Its width, height and font are inline: they are
+            //    the file's as well as the page's, see sizeTreeSvg and where
+            //    the svg is made. The background is the viewer's own rect.)
+            //    border-box, so that a border a page gives it on purpose fits
+            //    inside the size stated, in a page with a reset and without.
+            //    Nor does it move as a page's "* { transition: all .3s }" would
+            //    have it: the tree is redrawn frame by frame.
+            + tree + ' { color:#000; background:none; max-width:none; box-sizing:border-box;'
+            + '  vertical-align:baseline; transition:none; animation:none; ' + start + ' }'
+            // "node" is every d3 example's class as well: ".node { font: 10px sans-serif; cursor: pointer }"
+            + tree + ' g.node { font:inherit; cursor:inherit; }'
+            // 4. The browser's own focus ring, back on whatever does not draw
+            //    one of its own: ":focus { outline:0 }" is in many a sheet.
+            + ':is(' + FOCUS_RING_ROOTS.join(', ') + ') :focus-visible:not(' + OWN_FOCUS.join(', ') + ')'
+            + ' { outline:revert; outline-offset:revert; }';
+    }
+
     function injectPanelStyles() {
         loadPanelTheme();
         if (document.getElementById(PANEL_STYLE_ID)) {
@@ -16680,7 +17008,7 @@ function (root, d3, forester, phyloXml) {
             + '  --p-line:#27343f; --p-line-strong:#35434f; --p-surface2:#202d38;'
             + '  --p-accent:#57a6ff; --p-accent-ink:#9cc7ff; --p-accent-weak:rgba(87,166,255,0.18);'
             + '  --p-shadow-sm:0 1px 2px rgba(0,0,0,0.4);';
-        let css = ''
+        let css = hostProofCss()
             + '.aptx-panel {'
             + '  --p-bg: rgba(255,255,255,0.86); --p-ink:#1e2a35; --p-muted:#6b7a89; --p-faint:#93a3b2; --p-warn:#b15a0b;'
             + '  --p-line:#e3e9f0; --p-line-strong:#cad6e1; --p-surface2:#f3f6fa;'
@@ -16817,6 +17145,11 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-dialog-close:hover { background:var(--p-accent-weak); color:var(--p-accent-ink);'
             + '  border-color:var(--p-accent); }'
             + '.aptx-dialog-body { padding:10px 13px 12px; overflow:auto; }'
+            // a dialog that scrolls gets the panel's own scrollbar: the
+            // browser's default track is white in the dark theme too
+            + '.aptx-dialog-body::-webkit-scrollbar { width:9px; height:9px; }'
+            + '.aptx-dialog-body::-webkit-scrollbar-thumb { background:var(--p-line-strong); border-radius:9px; border:2px solid var(--p-bg); }'
+            + '.aptx-dialog-body::-webkit-scrollbar-track, .aptx-dialog-body::-webkit-scrollbar-corner { background:transparent; }'
             + '.aptx-cp-sv { position:relative; width:100%; box-sizing:border-box; height:104px; border-radius:7px;'
             + '  border:1px solid var(--p-line-strong); cursor:crosshair; touch-action:none; }'
             + '.aptx-cp-hue { position:relative; width:100%; box-sizing:border-box; height:13px; margin-top:9px;'
@@ -16871,7 +17204,8 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-reps { line-height:1.35; }'
             + '.aptx-reps-lead { margin:0 0 4px; }'
             + '.aptx-reps-choice { display:flex; align-items:center; gap:6px; padding:2px 0; cursor:pointer; }'
-            + '.aptx-reps-choice input { accent-color:var(--p-accent); width:13px; height:13px; margin:0; flex:none; }'
+            // (".aptx-dialog": Bootstrap 3's rule for a tick box weighs as much as ".aptx-reps-choice input")
+            + '.aptx-dialog .aptx-reps-choice input { accent-color:var(--p-accent); width:13px; height:13px; margin:0; flex:none; }'
             + '.aptx-reps-disabled { color:var(--p-faint); cursor:default; }'
             + '.aptx-reps-input { display:block; box-sizing:border-box; width:100%; font:inherit; color:var(--p-ink);'
             + '  background:var(--p-surface2); border:1px solid var(--p-line-strong); border-radius:6px; padding:4px 7px; }'
@@ -16920,18 +17254,18 @@ function (root, d3, forester, phyloXml) {
             // node's in the tree and is set on the point itself
             + '.aptx-dialog-drag { cursor:move; touch-action:none; user-select:none; -webkit-user-select:none; }'
             + '.aptx-clock.aptx-dialog-body { overflow:visible; }'
-            + '.aptx-clock-svg { display:block; touch-action:none; user-select:none; -webkit-user-select:none; }'
-            + '.aptx-clock-svg text { font-size:10px; fill:var(--p-muted); font-variant-numeric:tabular-nums; }'
-            + '.aptx-clock-svg text.aptx-clock-title { font-size:10.5px; fill:var(--p-ink); }'
-            + '.aptx-clock-ground { fill:var(--p-surface2); }'
-            + '.aptx-clock-grid { stroke:var(--p-line); stroke-width:1; shape-rendering:crispEdges; }'
-            + '.aptx-clock-frame { stroke:var(--p-line-strong); stroke-width:1; shape-rendering:crispEdges; }'
-            + '.aptx-clock-line { stroke:var(--p-accent); stroke-width:1.6; }'
-            + '.aptx-clock-internal circle { fill:var(--p-faint); fill-opacity:0.55; }'
-            + '.aptx-clock-tips circle { fill:var(--p-ink); fill-opacity:0.8; }'
-            + '.aptx-clock-svg circle.aptx-clock-hit { fill-opacity:1; stroke-width:1.2; }'
-            + '.aptx-clock-ring { fill:none; stroke:var(--p-accent); stroke-width:1.8; pointer-events:none; }'
-            + '.aptx-clock-box { fill:var(--p-accent-weak); stroke:var(--p-accent); stroke-width:1;'
+            + '.aptx-dialog .aptx-clock-svg { display:block; touch-action:none; user-select:none; -webkit-user-select:none; }'
+            + '.aptx-dialog .aptx-clock-svg text { font-size:10px; fill:var(--p-muted); font-variant-numeric:tabular-nums; }'
+            + '.aptx-dialog .aptx-clock-svg text.aptx-clock-title { font-size:10.5px; fill:var(--p-ink); }'
+            + '.aptx-dialog .aptx-clock-ground { fill:var(--p-surface2); }'
+            + '.aptx-dialog .aptx-clock-grid { stroke:var(--p-line); stroke-width:1; shape-rendering:crispEdges; }'
+            + '.aptx-dialog .aptx-clock-frame { stroke:var(--p-line-strong); stroke-width:1; shape-rendering:crispEdges; }'
+            + '.aptx-dialog .aptx-clock-line { stroke:var(--p-accent); stroke-width:1.6; }'
+            + '.aptx-dialog .aptx-clock-internal circle { fill:var(--p-faint); fill-opacity:0.55; }'
+            + '.aptx-dialog .aptx-clock-tips circle { fill:var(--p-ink); fill-opacity:0.8; }'
+            + '.aptx-dialog .aptx-clock-svg circle.aptx-clock-hit { fill-opacity:1; stroke-width:1.2; }'
+            + '.aptx-dialog .aptx-clock-ring { fill:none; stroke:var(--p-accent); stroke-width:1.8; pointer-events:none; }'
+            + '.aptx-dialog .aptx-clock-box { fill:var(--p-accent-weak); stroke:var(--p-accent); stroke-width:1;'
             + '  shape-rendering:crispEdges; pointer-events:none; }'
             + '.aptx-clock-options { display:flex; align-items:center; gap:14px; margin:6px 0 8px; }'
             + '.aptx-clock-options .aptx-clock-deselect { margin-left:auto; height:22px; padding:0 9px; }'
@@ -16974,13 +17308,30 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .' + PROGNAMELINK + ' { background:none; padding:0; margin:0; cursor:pointer;'
             + '  font-family:inherit; font-weight:inherit; letter-spacing:inherit; }'
             + '.aptx-panel .' + PROGNAMELINK + ':hover { text-decoration:underline; }'
+            + '.aptx-doctor-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--p-muted); vertical-align:middle; }'
+            + '.aptx-doctor-dot[hidden] { display:none; }'
+            + '.aptx-panel .' + PROGNAMELINK + ' .aptx-doctor-dot { margin-left:6px; }'
+            + '.aptx-about .aptx-doctor-dot { margin-right:6px; }'
+            + '.aptx-dialog-body.aptx-doctor { max-height:min(70vh,560px); }'
+            + '.aptx-doctor .aptx-dialog-key { flex-basis:34%; }'
+            + '.aptx-doctor-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }'
+            + '.aptx-doctor-status { flex:1 1 auto; min-width:0; font-weight:650; }'
+            + '.aptx-doctor-status.aptx-doctor-bad { box-shadow:inset 3px 0 0 var(--p-warn); padding-left:9px; }'
+            + '.aptx-doctor-item { position:relative; padding:2px 0 2px 14px; line-height:1.35; overflow-wrap:anywhere; }'
+            + '.aptx-doctor-item::before { content:""; position:absolute; left:2px; top:0.62em; width:6px; height:6px; border-radius:50%; background:var(--p-faint); }'
+            + '.aptx-doctor-item.aptx-doctor-bad::before { background:var(--p-warn); }'
+            + '.aptx-doctor-item.aptx-doctor-note { color:var(--p-muted); }'
+            + '.aptx-doctor-section { margin:11px 0 3px; font-size:10.5px; font-weight:650; letter-spacing:0.05em; text-transform:uppercase; color:var(--p-muted); }'
+            + '.aptx-doctor-detail { display:block; color:var(--p-muted); line-height:1.35; }'
+            + '.aptx-doctor .aptx-dialog-line.aptx-doctor-bad .aptx-doctor-value { color:var(--p-warn); font-weight:600; }'
+            + '.aptx-doctor-copy { flex:none; }'
             + '.aptx-dialog-body.aptx-about { padding-top:13px; }'
             // the label column is narrower here than for node data: these values
             // are URLs, and they should not have to wrap mid-word
             + '.aptx-about .aptx-dialog-key { flex-basis:31%; }'
             + '.aptx-about-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }'
             + '.aptx-about-logo { flex:none; width:56px; height:56px; }'
-            + '.aptx-about-logo svg { width:100%; height:100%; display:block; }'
+            + '.aptx-dialog .aptx-about-logo svg { width:100%; height:100%; display:block; }'
             + '.aptx-about-name { font-size:15px; font-weight:650; letter-spacing:-0.01em; }'
             + '.aptx-about-version { color:var(--p-muted); }'
             + '.aptx-about-blurb { margin:0 0 11px; color:var(--p-muted); }'
@@ -17006,6 +17357,7 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel legend { float:none; width:auto; padding:0; margin:0 0 5px; font-size:9px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--p-faint); }'
             + '.aptx-panel label { cursor:pointer; }'
             + '.aptx-panel input[type=checkbox],.aptx-panel input[type=radio] { accent-color:var(--p-accent); width:13px; height:13px; vertical-align:-2px; margin:0 4px 0 0; }'
+            + '.aptx-panel input[type=checkbox]:disabled,.aptx-panel input[type=radio]:disabled { cursor:default; }'
             // checkbox/radio + label as one item (used by the Display Data grid and the inline P/A/C and search-option rows)
             // every item carries an invisible box, so the one that lights up
             // (Auto-hide Labels while it is hiding) does not shift its neighbours
@@ -17093,9 +17445,9 @@ function (root, d3, forester, phyloXml) {
             + '.aptx-panel .aptx-searchnav { align-items:center; gap:4px; margin:2px 0 4px; }'
             + '.aptx-panel .aptx-searchnav span { flex:1 1 auto; text-align:center; font-weight:600; font-size:11px; color:var(--p-ink); }'
             + '.aptx-panel .aptx-searchnav .aptx-gbtn:last-child { margin-right:0; }'
-            + '.aptx-found-halo { opacity:' + HALO_REST_OPACITY + '; transform-box:fill-box; transform-origin:center; animation:aptx-halo-pulse 1.3s ease-in-out infinite; }'
+            + 'svg.' + TREE_SVG_CLASS + ' .aptx-found-halo { opacity:' + HALO_REST_OPACITY + '; transform-box:fill-box; transform-origin:center; animation:aptx-halo-pulse 1.3s ease-in-out infinite; }'
             + '@keyframes aptx-halo-pulse { 0%,100% { transform:scale(1); opacity:' + HALO_REST_OPACITY + '; } 50% { transform:scale(2.5); opacity:0.12; } }'
-            + '@media (prefers-reduced-motion: reduce) { .aptx-found-halo { animation:none; } }'
+            + '@media (prefers-reduced-motion: reduce) { svg.' + TREE_SVG_CLASS + ' .aptx-found-halo { animation:none; } }'
             + '.aptx-panel .aptx-zoomgrid { display:flex; flex-direction:column; align-items:stretch; }'
             + '.aptx-panel .aptx-zoomgrid > input[type=button] { width:100%; margin-right:0; }'
             + '.aptx-panel .aptx-zoomrow { display:flex; }'
@@ -17255,6 +17607,16 @@ function (root, d3, forester, phyloXml) {
                     e.stopPropagation();
                     showAboutDialog();
                 });
+                // config warnings are recorded before this header exists
+                syncDoctorDot();
+                // ... and a library can arrive after it (see syncDoctorDot)
+                let panel = header.closest('.aptx-panel');
+                if (panel) {
+                    panel.addEventListener('pointerenter', syncDoctorDot);
+                }
+                if (document.readyState !== 'complete') {
+                    window.addEventListener('load', syncDoctorDot, {once: true});
+                }
 
                 let themeBtn = document.createElement('button');
                 themeBtn.type = 'button';
@@ -18088,10 +18450,693 @@ function (root, d3, forester, phyloXml) {
         shell.dialog.showModal();
     }
 
+    // ===================== Diagnostics =====================
+    // "Dependencies are checked when used, never at load time" makes the
+    // viewer hard to break and easy to run half-equipped without knowing: on
+    // BV-BRC it ran for weeks with no PDF or PNG export, a retired config key
+    // and a forced visualization, and every one of those was found by reading
+    // the site's source (Christian, 2026-10-09: a "check engine light" and a
+    // doctor behind it). This is the one place that says what is loaded, what
+    // that switches off, and what the launch complained about.
+    //
+    // Two rules decide what is a PROBLEM (lights the dot) and what is only
+    // stated:
+    //   * an optional library that is simply absent is a site's choice, and
+    //     is stated ("PDF export: off"), never flagged;
+    //   * something nobody chooses is a problem: half of a pair (jspdf
+    //     without svg2pdf.js), a library from the 2.x days under its old
+    //     global, a d3 that is not 7, forester.js from another release, a
+    //     phyloxml that no longer writes what this release expects, and every
+    //     warning or error the launch printed about its config.
+    // Only d3, jsPDF and forester state a version, so everything else is
+    // judged by what it can do.
+    //
+    // Nothing in here may throw: every check runs in its own try, and a check
+    // that fails says so in its own row.
+
+    // phyloxml states no version, so a small tree goes through it and what
+    // comes back is read for what an OLDER release is known to do. Each of
+    // these is a named fault, and each published release before 1.1.7 shows
+    // at least one (measured on 1.0.2, 1.1.3, 1.1.4, 1.1.5 and 1.1.6):
+    //   * it drops the domain architecture, or a <phylogeny>'s own property
+    //     (before 1.1.5 / 1.1.3): a saved tree LOSES data;
+    //   * it writes a style colour as it came, or the style property before
+    //     the node's other properties (before 1.1.7): the saved file differs
+    //     from the desktop program's.
+    // Whether the output is byte for byte what 1.1.7 writes is looked at too,
+    // but a difference there alone is only a NOTE. package.json admits any
+    // 1.1.x from 1.1.7 up, a release of this viewer cannot be corrected
+    // after it is published, and a newer phyloxml that lays a file out
+    // differently must not light a dot on every page that has it. (A first
+    // version demanded the bytes and called every difference "an older
+    // copy".)
+    const PHYLOXML_PROBE_IN = '<phyloxml xmlns="http://www.phyloxml.org"><phylogeny rooted="true"><clade>'
+        + '<clade><name>a</name><branch_length>1</branch_length>'
+        + '<sequence><domain_architecture length="9"><domain from="1" to="5" confidence="0.1">D</domain>'
+        + '</domain_architecture></sequence>'
+        + '<property ref="style:font_color" datatype="xsd:token" applies_to="node">#CE1616</property>'
+        + '<property ref="x:y" datatype="xsd:string" applies_to="node">v</property></clade>'
+        + '<clade><name>b</name><branch_length>2</branch_length></clade></clade>'
+        + '<property ref="p:q" datatype="xsd:string" applies_to="phylogeny">w</property></phylogeny></phyloxml>';
+    const PHYLOXML_PROBE_OUT = ['<?xml version="1.0" encoding="UTF-8"?>',
+        '<phyloxml xmlns="http://www.phyloxml.org">',
+        '<phylogeny rooted="true" rerootable="true">',
+        '  <clade>',
+        '    <clade>',
+        '      <name>a</name>',
+        '      <branch_length>1</branch_length>',
+        '      <sequence>',
+        '        <domain_architecture length="9">',
+        '          <domain from="1" to="5" confidence="0.1">D</domain>',
+        '        </domain_architecture>',
+        '      </sequence>',
+        '      <property ref="x:y" datatype="xsd:string" applies_to="node">v</property>',
+        '      <property ref="style:font_color" datatype="xsd:token" applies_to="node">#ce1616</property>',
+        '    </clade>',
+        '    <clade>',
+        '      <name>b</name>',
+        '      <branch_length>2</branch_length>',
+        '    </clade>',
+        '  </clade>',
+        '  <property ref="p:q" datatype="xsd:string" applies_to="phylogeny">w</property>',
+        '</phylogeny>',
+        '</phyloxml>'].join('\n');
+    const PHYLOXML_EXPECTED = '1.1.7';
+    const D3_TESTED_MINOR = 9;       // package.json: d3 ^7.9.0
+    const JSPDF_TESTED_MAJOR = 4;    // package.json: jspdf ^4.2.1
+
+    // The probe's answer for the library object it was asked about: the
+    // dot asks often, and the answer cannot change.
+    //   threw / stage   reading ('read') or writing ('write') failed, with the message
+    //   lost            what a saved tree no longer has
+    //   old             what is written as releases before 1.1.7 wrote it
+    //   same            the output is byte for byte 1.1.7's
+    let _phyloXmlProbe = null;
+    function probePhyloXml(px) {
+        if (_phyloXmlProbe && _phyloXmlProbe.lib === px) {
+            return _phyloXmlProbe.result;
+        }
+        let result = {threw: null, stage: null, lost: [], old: [], same: false};
+        let message = function (e) {
+            return String(e && e.message ? e.message : e);
+        };
+        let tree = null;
+        try {
+            tree = px.parse(PHYLOXML_PROBE_IN, {trim: true, normalize: true})[0];
+        } catch (e) {
+            result.threw = message(e);
+            result.stage = 'read';
+        }
+        let written = null;
+        if (!result.threw) {
+            try {
+                written = String(px.toPhyloXML(tree, 9));
+            } catch (e) {
+                result.threw = message(e);
+                result.stage = 'write';
+            }
+        }
+        if (written !== null) {
+            result.same = written === PHYLOXML_PROBE_OUT;
+            if (!/<domain from="1" to="5"[^>]*>D<\/domain>/.test(written)) {
+                result.lost.push('protein domains');
+            }
+            if (written.indexOf('ref="p:q"') < 0) {
+                result.lost.push('a tree\'s own properties');
+            }
+            if (written.indexOf('ref="x:y"') < 0) {
+                result.lost.push('node properties');
+            }
+            let style = written.indexOf('ref="style:font_color"');
+            if (style < 0) {
+                result.lost.push('node styles');
+            } else {
+                if (written.indexOf('>#ce1616<') < 0) {
+                    result.old.push('a style colour as it came, not in lower case');
+                }
+                if (written.indexOf('ref="x:y"') > style) {
+                    result.old.push('a node\'s style before its other properties');
+                }
+            }
+        }
+        _phyloXmlProbe = {lib: px, result: result};
+        return result;
+    }
+
+    // One library's row. `judge` returns {loaded, version, status, detail};
+    // status is 'ok', 'absent' (optional and not there: stated), 'note' or
+    // 'problem'.
+    function doctorLibrary(name, role, judge) {
+        let row = {name: name, role: role, loaded: false, version: null, status: 'problem', detail: ''};
+        try {
+            let j = judge();
+            row.loaded = !!j.loaded;
+            row.version = j.version || null;
+            row.status = j.status;
+            row.detail = j.detail || '';
+        } catch (e) {
+            row.detail = 'this check failed: ' + (e && e.message ? e.message : e);
+        }
+        return row;
+    }
+
+    function doctorLibraries() {
+        let g = root || {};
+        // without a document there is nothing to launch into: the parsers
+        // work with no d3 at all, so its absence there is not a fault
+        let inBrowser = typeof g.document !== 'undefined';
+        let libs = [];
+
+        libs.push(doctorLibrary('forester.js', 'required', function () {
+            let f = forester || g.forester;
+            if (!f) {
+                return {loaded: false, status: 'problem', detail: 'not loaded: nothing can be read or drawn'};
+            }
+            if (f.VERSION === VERSION) {
+                return {loaded: true, version: f.VERSION, status: 'ok'};
+            }
+            return {loaded: true, version: f.VERSION || null, status: 'problem',
+                detail: (f.VERSION ? 'forester.js is ' + f.VERSION : 'forester.js states no version, so it is an older file')
+                    + ', archaeopteryx.js is ' + VERSION + ': the two must come from the same release'};
+        }));
+
+        libs.push(doctorLibrary('d3', 'required', function () {
+            // THE d3 THE VIEWER USES, chosen as requireD3 chooses it: the one
+            // it was handed at load, and the page's global only where that
+            // one is missing or unusable. (A first version looked at the
+            // global first and could report on a d3 nothing was drawn with.)
+            let d = (g.d3 && (!d3 || typeof d3.zoom !== 'function')) ? g.d3 : d3;
+            if (!d) {
+                return inBrowser
+                    ? {loaded: false, status: 'problem', detail: 'not loaded: launch() fails without d3 version 7'}
+                    : {loaded: false, status: 'absent', detail: 'not loaded: only launch() needs it'};
+            }
+            let usable = typeof d.zoom === 'function' && typeof d.cluster === 'function';
+            let version = typeof d.version === 'string' ? d.version : null;
+            if (version === null) {
+                // d3's ES-module build exports no `version`: a bundler's
+                // `import * as d3`, jsdelivr's +esm, Node's require('d3'). It
+                // is judged by what only d3 7 has -- InternMap arrived with
+                // d3-array 3, which is d3 7.0.0 -- and never called outdated
+                // for not saying its number.
+                if (usable && typeof d.InternMap === 'function') {
+                    return {loaded: true, status: 'ok', detail: 'states no version (an ES-module build); has what d3 7 has'};
+                }
+                return {loaded: true, status: inBrowser ? 'problem' : 'absent',
+                    detail: inBrowser ? 'states no version and lacks what d3 7 has: Archaeopteryx.js needs d3 version 7'
+                        : 'not usable here as d3 version 7: only launch() needs it'};
+            }
+            let parts = version.split('.').map(Number);
+            if (parts[0] !== 7 || !usable) {
+                return {loaded: true, version: version, status: inBrowser ? 'problem' : 'absent',
+                    detail: inBrowser ? 'Archaeopteryx.js needs d3 version 7'
+                        : 'not usable here as d3 version 7: only launch() needs it'};
+            }
+            if (parts[1] < D3_TESTED_MINOR) {
+                return {loaded: true, version: version, status: 'note',
+                    detail: 'older than the 7.' + D3_TESTED_MINOR + ' this release is tested with'};
+            }
+            return {loaded: true, version: version, status: 'ok'};
+        }));
+
+        let px = null;
+        let probe = null;
+        libs.push(doctorLibrary('phyloxml', 'required', function () {
+            px = phyloXml || g.phyloXml;
+            probe = px ? probePhyloXml(px) : null;
+            if (!px) {
+                return {loaded: false, status: 'problem',
+                    detail: 'not loaded: phyloXML cannot be read, and the phyloXML download fails'};
+            }
+            if (probe.threw) {
+                // on a page phyloxml takes sax from the global, and a missing
+                // one is the usual reason reading fails; anywhere else, and
+                // for any other failure, the message itself is the finding
+                return {loaded: true, status: 'problem', detail: (probe.stage === 'read' && inBrowser && !g.sax)
+                    ? 'cannot read phyloXML: sax.js is not loaded'
+                    : (probe.stage === 'read' ? 'reading' : 'writing') + ' a small tree failed: ' + probe.threw};
+            }
+            if (probe.lost.length > 0) {
+                return {loaded: true, status: 'problem', detail: 'an older copy: saving a tree as phyloXML drops '
+                    + probe.lost.join(', ') + ' (phyloxml ' + PHYLOXML_EXPECTED + ' keeps them)'};
+            }
+            if (probe.old.length > 0) {
+                return {loaded: true, status: 'problem', detail: 'an older copy: it writes ' + probe.old.join(', and ')
+                    + ', so a saved tree differs from the desktop program\'s file (phyloxml ' + PHYLOXML_EXPECTED
+                    + ' does not)'};
+            }
+            if (!probe.same) {
+                return {loaded: true, status: 'note', detail: 'writes a small tree differently from phyloxml '
+                    + PHYLOXML_EXPECTED + ', losing nothing: a newer release, or an altered copy'};
+            }
+            return {loaded: true, status: 'ok', detail: 'writes phyloXML as ' + PHYLOXML_EXPECTED + ' does'};
+        }));
+        libs.push(doctorLibrary('sax', 'required', function () {
+            // A page hands sax over as a global. Anywhere else (Node, a
+            // bundler) phyloxml gets it by require() when it loads, so a
+            // phyloxml that loaded has it, and a tree it read proves it.
+            if (g.sax || (probe && probe.stage !== 'read')) {
+                return {loaded: true, status: 'ok'};
+            }
+            if (!inBrowser && px) {
+                return {loaded: true, status: 'ok', detail: 'taken by phyloxml when it loaded'};
+            }
+            return {loaded: false, status: 'problem', detail: 'not loaded: phyloxml needs it to read phyloXML'};
+        }));
+
+        libs.push(doctorLibrary('canvg', 'optional', function () {
+            if (g.Canvg && typeof g.Canvg.fromString === 'function') {
+                return {loaded: true, status: 'ok'};
+            }
+            if (g.Canvg) {
+                return {loaded: true, status: 'problem',
+                    detail: 'window.Canvg has no fromString: not canvg 4, so PNG export is off'};
+            }
+            if (g.canvg) {
+                return {loaded: true, status: 'problem', detail: 'loaded under its old global "canvg" (canvg 1 to 3);'
+                    + ' PNG export needs canvg 4 as window.Canvg, so it is off'};
+            }
+            return {loaded: false, status: 'absent', detail: 'not loaded: PNG export and Copy PNG are off'};
+        }));
+
+        // The pair is read inside each row's own guard: whatever a page has
+        // put under these names, a lookup that throws costs its row and no
+        // other.
+        let pdfPair = function () {
+            let J = g.jspdf && g.jspdf.jsPDF;
+            return {J: J, attached: !!(J && J.API && J.API.svg), svg2pdf: !!g.svg2pdf};
+        };
+        libs.push(doctorLibrary('jspdf', 'optional', function () {
+            let pair = pdfPair();
+            let J = pair.J;
+            let attached = pair.attached;
+            if (J) {
+                let version = typeof J.version === 'string' ? J.version : null;
+                if (!attached && !g.svg2pdf) {
+                    return {loaded: true, version: version, status: 'problem',
+                        detail: 'loaded without svg2pdf.js: PDF export needs both, so it is off'};
+                }
+                if (version && Number(version.split('.')[0]) !== JSPDF_TESTED_MAJOR) {
+                    return {loaded: true, version: version, status: 'note',
+                        detail: 'this release is tested with jspdf ' + JSPDF_TESTED_MAJOR};
+                }
+                return {loaded: true, version: version, status: 'ok'};
+            }
+            if (g.jsPDF) {
+                return {loaded: true, status: 'problem', detail: 'loaded under its old global "jsPDF" (jsPDF 1);'
+                    + ' PDF export needs jspdf ' + JSPDF_TESTED_MAJOR + ' as window.jspdf, so it is off'};
+            }
+            return {loaded: false, status: 'absent', detail: 'not loaded: PDF export is off'};
+        }));
+        libs.push(doctorLibrary('svg2pdf.js', 'optional', function () {
+            let pair = pdfPair();
+            let J = pair.J;
+            let attached = pair.attached;
+            if (attached) {
+                return {loaded: true, status: 'ok'};
+            }
+            if (g.svg2pdf && J) {
+                return {loaded: true, status: 'problem', detail: 'loaded, but not attached to jspdf (jsPDF.API.svg'
+                    + ' is missing): load jspdf first. PDF export is off'};
+            }
+            if (g.svg2pdf) {
+                return {loaded: true, status: 'problem',
+                    detail: 'loaded without jspdf: PDF export needs both, so it is off'};
+            }
+            return {loaded: false, status: 'absent',
+                detail: J ? 'not loaded' : 'not loaded: PDF export is off'};
+        }));
+        return libs;
+    }
+
+    // What the user gets or does not get, each with the reason.
+    function doctorFunctions(libs) {
+        let lib = function (name) {
+            return libs.find(function (l) {
+                return l.name === name;
+            });
+        };
+        let inBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+        let fn = function (name, test, whyNot) {
+            let available = false;
+            let detail = '';
+            try {
+                available = inBrowser && !!test();
+                detail = available ? '' : (inBrowser ? whyNot() : 'needs a browser');
+            } catch (e) {
+                detail = 'this check failed: ' + (e && e.message ? e.message : e);
+            }
+            return {name: name, available: available, detail: detail};
+        };
+        // why a function is off, in the library's name: its row's reason
+        // reads "not loaded: ..." under its own name and needs the subject here
+        let why = function (l) {
+            return l.status === 'absent' ? l.name + ' is not loaded' : l.name + ': ' + l.detail;
+        };
+        let out = [];
+        try {
+            // ON whenever phyloxml reads and writes at all -- which is what
+            // the Download menu's phyloXML entry does, and it is always
+            // offered. An older copy still works: its row above says what a
+            // saved file loses, and this row repeats it without turning off.
+            let px = lib('phyloxml');
+            let works = px.loaded && !/(cannot read phyloXML|a small tree failed|this check failed)/.test(px.detail);
+            out.push({name: 'Read and save phyloXML', available: works,
+                detail: px.status === 'ok' ? '' : (works ? px.detail : why(px))});
+        } catch (e) {
+            out.push({name: 'Read and save phyloXML', available: false,
+                detail: 'this check failed: ' + (e && e.message ? e.message : e)});
+        }
+        out.push(fn('PNG export', pngExportAvailable, function () {
+            return why(lib('canvg'));
+        }));
+        out.push(fn('Copy PNG', pngCopyAvailable, function () {
+            if (!pngExportAvailable()) {
+                return why(lib('canvg'));
+            }
+            return window.isSecureContext ? 'this browser cannot write an image to the clipboard'
+                : 'needs a secure page (https, or localhost)';
+        }));
+        out.push(fn('PDF export', pdfExportAvailable, function () {
+            let pair = [lib('jspdf'), lib('svg2pdf.js')];
+            let bad = pair.find(function (l) {
+                return l.status === 'problem';
+            });
+            if (bad) {
+                return why(bad);
+            }
+            return pair.every(function (l) {
+                return l.status === 'absent';
+            }) ? 'jspdf and svg2pdf.js are not loaded' : why(pair.find(function (l) {
+                return l.status !== 'ok';
+            }) || pair[0]);
+        }));
+        return out;
+    }
+
+    // A config value as one short word or number: enough to see what a site
+    // passed, never the value itself where that could be a tree or a callback.
+    function doctorConfigValue(v) {
+        if (v === null || typeof v === 'boolean' || typeof v === 'number') {
+            return v;
+        }
+        if (typeof v === 'string') {
+            return v.length > 80 ? v.substring(0, 77) + '...' : v;
+        }
+        if (typeof v === 'function') {
+            return '(function)';
+        }
+        if (Array.isArray(v)) {
+            return '(list of ' + v.length + ')';
+        }
+        return '(' + typeof v + ')';
+    }
+
+    // The tree on view, as noted when its launch took the page over
+    // (_onView): null until one has, so a first launch that was rejected
+    // describes no tree. The tip count is the one the launch computed.
+    function doctorLaunch() {
+        if (!_onView) {
+            return null;
+        }
+        let launch = {config: {}, tips: null, tree: _onView.tree, trees: _onView.trees, container: null};
+        try {
+            Object.keys(_onView.config || {}).sort().forEach(function (k) {
+                launch.config[k] = doctorConfigValue(_onView.config[k]);
+            });
+        } catch {
+            launch.config = {};
+        }
+        launch.tips = (typeof _onView.tips === 'number') ? _onView.tips : null;
+        try {
+            launch.container = {width: _onView.container.clientWidth, height: _onView.container.clientHeight};
+        } catch {
+            launch.container = null;
+        }
+        return launch;
+    }
+
+    function doctorText(rep) {
+        let pad = function (text, n) {
+            text = String(text);
+            return text + ' '.repeat(Math.max(1, n - text.length));
+        };
+        let lines = [NAME + ' ' + rep.version + ' diagnostics', ''];
+        lines.push('Status: ' + rep.summary);
+        rep.problems.forEach(function (p) {
+            lines.push('  ! ' + p);
+        });
+        lines.push('', 'Libraries');
+        rep.libraries.forEach(function (l) {
+            lines.push('  ' + pad(l.name, 13) + pad(l.version || (l.loaded ? 'loaded' : 'not loaded'), 12)
+                + pad(l.status === 'absent' ? l.role : l.status, 9) + l.detail);
+        });
+        lines.push('', 'Functions');
+        rep.functions.forEach(function (f) {
+            lines.push('  ' + pad(f.name, 24) + (f.available ? 'on' : 'off') + (f.detail ? '   ' + f.detail : ''));
+        });
+        if (rep.notes.length > 0) {
+            lines.push('', 'Notes');
+            rep.notes.forEach(function (n) {
+                lines.push('  - ' + n);
+            });
+        }
+        lines.push('', 'Launch');
+        if (rep.launch) {
+            lines.push('  config: ' + JSON.stringify(rep.launch.config));
+            if (rep.launch.tips !== null) {
+                lines.push('  tree: ' + rep.launch.tips + ' tips' + (rep.launch.trees > 1
+                    ? ' (tree ' + rep.launch.tree + ' of ' + rep.launch.trees + ')' : ''));
+            }
+            if (rep.launch.container) {
+                lines.push('  container: ' + rep.launch.container.width + ' x ' + rep.launch.container.height + ' px');
+            }
+        } else {
+            lines.push('  no tree is on view');
+        }
+        lines.push('', 'Environment');
+        lines.push('  ' + (rep.environment.userAgent || 'no browser'));
+        if (rep.environment.secureContext !== null) {
+            lines.push('  secure page: ' + (rep.environment.secureContext ? 'yes' : 'no'));
+        }
+        return lines.join('\n');
+    }
+
+    // The problems and the notes: the libraries' and what the launch said.
+    // This is all the dot needs, so it is kept apart from the report, which
+    // also works out the functions, the launch section and the text.
+    function doctorFindings() {
+        let libs;
+        try {
+            libs = doctorLibraries();
+        } catch (e) {
+            libs = [{name: 'libraries', role: 'required', loaded: false, version: null, status: 'problem',
+                detail: 'the checks failed: ' + (e && e.message ? e.message : e)}];
+        }
+        let problems = [];
+        let notes = [];
+        libs.forEach(function (l) {
+            if (l.status === 'problem') {
+                problems.push(l.name + ': ' + l.detail);
+            } else if (l.status === 'note') {
+                notes.push(l.name + (l.version ? ' ' + l.version : '') + ': ' + l.detail);
+            }
+        });
+        _diagnostics.forEach(function (d) {
+            (d.level === 'problem' ? problems : notes).push(d.text + (d.count > 1 ? ' (' + d.count + ' times)' : ''));
+        });
+        return {libraries: libs, problems: problems, notes: notes,
+            summary: problems.length === 0 ? 'nothing to report'
+                : problems.length + (problems.length === 1 ? ' thing' : ' things') + ' to check'};
+    }
+
+    function doctorReport() {
+        let found = doctorFindings();
+        let libs = found.libraries;
+        let problems = found.problems;
+        let notes = found.notes;
+        let functions;
+        try {
+            functions = doctorFunctions(libs);
+        } catch {
+            functions = [];
+        }
+        let launch = null;
+        try {
+            launch = doctorLaunch();
+        } catch {
+            launch = null;
+        }
+        let nav = (typeof navigator !== 'undefined') ? navigator : null;
+        let rep = {
+            program: NAME,
+            version: VERSION,
+            ok: problems.length === 0,
+            summary: found.summary,
+            problems: problems,
+            notes: notes,
+            libraries: libs,
+            functions: functions,
+            launch: launch,
+            environment: {
+                userAgent: nav && nav.userAgent ? nav.userAgent : null,
+                secureContext: (typeof window !== 'undefined' && typeof window.isSecureContext === 'boolean')
+                    ? window.isSecureContext : null
+            }
+        };
+        try {
+            rep.text = doctorText(rep);
+        } catch (e) {
+            rep.text = NAME + ' ' + VERSION + ' diagnostics: the report could not be written ('
+                + (e && e.message ? e.message : e) + ')';
+        }
+        return rep;
+    }
+
+    /**
+     * The state of the program on this page: which libraries are loaded (and
+     * their versions, where a library states one), which functions that
+     * switches off, and what the last launch() warned about. Works before a
+     * launch and after a failed one, and in Node. Never throws.
+     *
+     * @returns {{program: string, version: string, ok: boolean, summary: string,
+     *   problems: string[], notes: string[], libraries: Object[], functions: Object[],
+     *   launch: Object|null, environment: Object, text: string}} `ok` is false when
+     *   something is wrong that nobody chooses (see README "Diagnostics");
+     *   `text` is the whole report as plain text, for pasting into an issue.
+     */
+    archaeopteryx.doctor = function () {
+        let rep = doctorReport();
+        syncDoctorDot();   // whoever asks sees a dot that agrees with the answer
+        return rep;
+    };
+
+    // The "check engine light": a small dot after the program name in the
+    // panel header, there only while the report has a problem. Neutral, not
+    // a warning colour: the people who see it are mostly the site's users,
+    // who can do nothing about it, and it is for the one who can.
+    //
+    // What a page has loaded can change under a viewer that is already up (a
+    // library arriving late, a script replacing a global) and nothing
+    // announces it, so the dot is brought up to date whenever it could be
+    // looked at or asked about: when a problem is recorded, when the header
+    // is built, when the page finishes loading, when the pointer enters the
+    // panel, when the About box opens and when doctor() is called.
+    function syncDoctorDot() {
+        try {
+            let host = _onView && _onView.container;
+            if (!host || typeof host.querySelector !== 'function') {
+                return;
+            }
+            let button = host.querySelector('.aptx-panel .' + PROGNAMELINK);
+            let dot = button && button.querySelector('.aptx-doctor-dot');
+            if (!dot) {
+                return;
+            }
+            let found = doctorFindings();
+            let ok = found.problems.length === 0;
+            dot.hidden = ok;
+            button.title = 'About ' + NAME + (ok ? '' : ': ' + found.summary);
+        } catch {
+            // a light that cannot be lit must not take the viewer with it
+        }
+    }
+
+    function showDoctorDialog() {
+        let rep = doctorReport();
+        let shell = makeDialogShell(DOCTOR_DIALOG, 'Diagnostics', 500);
+        shell.body.classList.add('aptx-doctor');
+
+        // The summary and Copy report share the first line: the report is
+        // longer than a small window, and the one button must not be the
+        // thing scrolled out of sight.
+        let head = document.createElement('div');
+        head.className = 'aptx-doctor-head';
+        let status = document.createElement('div');
+        status.className = 'aptx-doctor-status' + (rep.ok ? '' : ' aptx-doctor-bad');
+        status.textContent = NAME + ' ' + rep.version + ': ' + rep.summary;
+        let copy = document.createElement('button');
+        copy.type = 'button';
+        copy.className = 'aptx-reps-button aptx-doctor-copy';
+        copy.textContent = 'Copy report';
+        copy.title = 'copy this report as text, with the launch configuration and the browser added,'
+            + ' to paste into an issue or an e-mail';
+        copy.addEventListener('click', function () {
+            copyText(rep.text, shell.dialog).then(function (ok) {
+                flashButton(copy, ok ? 'Copied \u2713' : 'Copy failed');
+            });
+        });
+        head.appendChild(status);
+        head.appendChild(copy);
+        shell.body.appendChild(head);
+
+        let list = function (items, cls) {
+            items.forEach(function (text) {
+                let item = document.createElement('div');
+                item.className = 'aptx-doctor-item ' + cls;
+                item.textContent = text;   // may quote a config value: never markup
+                shell.body.appendChild(item);
+            });
+        };
+        let section = function (title) {
+            let h = document.createElement('div');
+            h.className = 'aptx-doctor-section';
+            h.textContent = title;
+            shell.body.appendChild(h);
+        };
+        let row = function (key, value, detail, bad) {
+            let line = document.createElement('div');
+            line.className = 'aptx-dialog-line' + (bad ? ' aptx-doctor-bad' : '');
+            let k = document.createElement('span');
+            k.className = 'aptx-dialog-key';
+            k.textContent = key;
+            let v = document.createElement('span');
+            v.className = 'aptx-dialog-val';
+            let main = document.createElement('span');
+            main.className = 'aptx-doctor-value';
+            main.textContent = value;
+            v.appendChild(main);
+            if (detail) {
+                let d = document.createElement('span');
+                d.className = 'aptx-doctor-detail';
+                d.textContent = detail;
+                v.appendChild(d);
+            }
+            line.appendChild(k);
+            line.appendChild(v);
+            shell.body.appendChild(line);
+        };
+        list(rep.problems, 'aptx-doctor-bad');
+
+        section('Libraries');
+        rep.libraries.forEach(function (l) {
+            // "not loaded" is the value: a reason that opens with the same
+            // two words and a colon does not say them again. (Only that
+            // exact opening: "loaded, but not attached..." keeps its start.)
+            let value = l.version || (l.loaded ? 'loaded' : 'not loaded');
+            let detail = l.detail === value ? ''
+                : (l.detail.indexOf('not loaded: ') === 0 && value === 'not loaded' ? l.detail.substring(12) : l.detail);
+            row(l.name, value, detail, l.status === 'problem');
+        });
+        section('Functions');
+        rep.functions.forEach(function (f) {
+            row(f.name, f.available ? 'on' : 'off', f.detail, false);
+        });
+        if (rep.notes.length > 0) {
+            section('Notes');
+            list(rep.notes, 'aptx-doctor-note');
+        }
+
+        shell.dialog.showModal();
+    }
+
     // The About box behind the panel's title. Everything here is fixed text and
     // fixed URLs -- no tree data reaches it -- so the links are built as real
-    // elements rather than markup.
+    // elements rather than markup. (The Diagnostics row's text is the doctor's
+    // own summary: a count, never a value.)
     function showAboutDialog() {
+        let rep = doctorReport();
+        syncDoctorDot();
         let shell = makeDialogShell(ABOUT_DIALOG, 'About', 380);
         shell.body.classList.add('aptx-about');
 
@@ -18099,7 +19144,7 @@ function (root, d3, forester, phyloXml) {
         head.className = 'aptx-about-head';
         let logo = document.createElement('div');
         logo.className = 'aptx-about-logo';
-        logo.innerHTML = ARCHAEOPTERYX_LOGO_SVG;
+        logo.innerHTML = paintInline(ARCHAEOPTERYX_LOGO_SVG);
         head.appendChild(logo);
 
         let titles = document.createElement('div');
@@ -18123,8 +19168,9 @@ function (root, d3, forester, phyloXml) {
             ['Desktop version', DESKTOP_WEBSITE, 'cmzmasek.github.io/archaeopteryx'],
             ['Source code', SOURCE_WEBSITE, 'github.com/cmzmasek/archaeopteryx-js'],
             ['License', LICENSE_WEBSITE, LICENSE_NAME],
-            ['Keyboard', null, 'shortcuts (' + (IS_MAC ? '\u2318 /' : 'Ctrl+/') + ')'],
-            ['Control panel', null, 'what each control does']].forEach(function (row) {
+            ['Keyboard', null, 'shortcuts (' + (IS_MAC ? '\u2318 /' : 'Ctrl+/') + ')', showShortcutsDialog],
+            ['Control panel', null, 'what each control does', showCheatSheetDialog],
+            ['Diagnostics', null, rep.summary, showDoctorDialog]].forEach(function (row) {
             let line = document.createElement('div');
             line.className = 'aptx-dialog-line';
             let key = document.createElement('span');
@@ -18138,9 +19184,9 @@ function (root, d3, forester, phyloXml) {
                 a.target = '_blank';
                 a.rel = 'noopener noreferrer';
             } else {
-                // the two rows with no URL open another dialog in place of
-                // this one: the key list, and the control-panel sheet
-                let opener = row[0] === 'Control panel' ? showCheatSheetDialog : showShortcutsDialog;
+                // the rows with no URL open another dialog in place of this
+                // one: the key list, the control-panel sheet, the diagnostics
+                let opener = row[3];
                 a.href = '#';
                 a.addEventListener('click', function (e) {
                     e.preventDefault();
@@ -18149,6 +19195,14 @@ function (root, d3, forester, phyloXml) {
                 });
             }
             a.textContent = row[2];
+            if (row[0] === 'Diagnostics') {
+                a.className = 'aptx-doctor-link';
+                if (!rep.ok) {
+                    let dot = document.createElement('span');
+                    dot.className = 'aptx-doctor-dot';
+                    val.appendChild(dot);
+                }
+            }
             val.appendChild(a);
             line.appendChild(key);
             line.appendChild(val);
@@ -18720,7 +19774,8 @@ function (root, d3, forester, phyloXml) {
             // by this, and a version is a value -- it belongs in the About box
             // it opens, not in a row that says what the button is
             h = h.concat('<button type="button" class="' + PROGNAMELINK + '" aria-label="' + NAME
-                + '" title="About ' + NAME + '">' + NAME + ' ' + VERSION + '</button>');
+                + '" title="About ' + NAME + '">' + NAME + ' ' + VERSION
+                + '<span class="aptx-doctor-dot" hidden></span></button>');
             h = h.concat('</div>');
             return h;
         }
@@ -19397,7 +20452,7 @@ function (root, d3, forester, phyloXml) {
             // 2x, 4x and 8x, and the setting is now the one it starts on
             // (Christian, 2026-09-28) -- said, not done silently
             if (_pngScale !== _settings.pngExportScale) {
-                console.warn(WARNING + ': pngExportScale ' + _settings.pngExportScale + ' is not one of '
+                say('problem', 'warn', WARNING + ': pngExportScale ' + _settings.pngExportScale + ' is not one of '
                     + DOWNLOAD_PNG_SCALES.join(', ') + ': the PNG starts at ' + _pngScale + 'x');
             }
             setRadioButtonValue(_downloadFullSize ? DOWNLOAD_FULL_SIZE_BUTTON : DOWNLOAD_AS_SHOWN_BUTTON, true);
@@ -19424,7 +20479,7 @@ function (root, d3, forester, phyloXml) {
             .attr('height', '100%')
             .style('opacity', 1)
             .attr('class', BASE_BACKGROUND)
-            .attr('fill', _state.backgroundColorDefault);
+            .style('fill', _state.backgroundColorDefault);
     }
 
 
@@ -19630,6 +20685,19 @@ function (root, d3, forester, phyloXml) {
         return _baseSvg ? _baseSvg.node() : null;
     }
 
+    // The tree svg's size, said twice. The attributes are what an export and
+    // the layout read; but an attribute gives way to any rule of the page the
+    // viewer is drawn in: under "svg { width: 24px; height: 24px }", a page
+    // whose only svgs were icons, the tree was 24 px square. (A rule that says
+    // "height: auto" changes nothing: the attributes still give the svg its
+    // own size.) The inline style does not give way.
+    function sizeTreeSvg(svg, w, h) {
+        svg.attr('width', w)
+            .attr('height', h)
+            .style('width', w + 'px')
+            .style('height', h + 'px');
+    }
+
     // An export is always light, whatever the screen is set to: a dark PNG or
     // SVG is wrong on paper, in a slide and in a paper figure, and it is the
     // file that outlives the session. Only the four theme colours are swapped,
@@ -19673,6 +20741,15 @@ function (root, d3, forester, phyloXml) {
     }
 
     function cleanExportCopy(copy) {
+        // What the live svg carries only for the page it is drawn in (its
+        // class, its size said a second time): a file has no page, and an
+        // inline size would hold a full-size drawing to the window's.
+        copy.classList.remove(TREE_SVG_CLASS);
+        if (!copy.getAttribute('class')) {
+            copy.removeAttribute('class');
+        }
+        copy.style.removeProperty('width');
+        copy.style.removeProperty('height');
         // Serialize a COPY with the overview taken out of it: the overview is
         // an on-screen navigation aid, not part of the tree, and working on a
         // copy leaves the live display untouched.
@@ -19689,7 +20766,57 @@ function (root, d3, forester, phyloXml) {
         if (glow) {
             glow.remove();
         }
-        return copy;
+        return paintAsAttributes(copy);
+    }
+
+    // The opposite of paintInline, for a file: a shape's paint, inline styles
+    // on the page, is attributes again (FILE_PAINT). Where an element says a
+    // thing both ways, the style is what painted it and has the last word.
+    function paintAsAttributes(svg) {
+        [svg].concat(Array.prototype.slice.call(svg.querySelectorAll('[style]'))).forEach(function (el) {
+            let style = el.style;
+            if (!style) {
+                return;
+            }
+            FILE_PAINT.forEach(function (name) {
+                let value = style.getPropertyValue(name);
+                if (value !== '') {
+                    // (the browser writes url("#id"); an attribute has no quotes there)
+                    el.setAttribute(name, value.replace(/^url\("([^"]*)"\)$/, 'url($1)'));
+                    style.removeProperty(name);
+                }
+            });
+            if (style.length === 0) {
+                el.removeAttribute('style');
+            }
+        });
+        // A colour with an alpha is the colour and, in the paint's own
+        // opacity, the alpha times what the shape has of it already, stated
+        // or handed down; a paint that is no paint at all is "none". Only on
+        // a shape: an opacity stated on a group would reach the shapes in it
+        // that have a colour of their own.
+        Array.prototype.slice.call(svg.querySelectorAll('[fill], [stroke], [stop-color]')).forEach(function (el) {
+            let holdsShapes = Array.prototype.some.call(el.children, function (child) {
+                return child.localName !== 'title' && child.localName !== 'desc';
+            });
+            Object.keys(FILE_ALPHA).forEach(function (paint) {
+                let c = el.hasAttribute(paint) ? d3.color(el.getAttribute(paint)) : null;
+                if (!c || !(c.opacity < 1) || holdsShapes) {
+                    return;
+                }
+                let opacity = FILE_ALPHA[paint];
+                if (c.opacity === 0 && paint !== 'stop-color') {
+                    el.setAttribute(paint, 'none');
+                    return;
+                }
+                // (a gradient's stop hands nothing down, and is handed nothing)
+                let from = paint === 'stop-color' ? (el.hasAttribute(opacity) ? el : null) : el.closest('[' + opacity + ']');
+                let has = from ? parseFloat(from.getAttribute(opacity)) : 1;
+                el.setAttribute(paint, c.copy({opacity: 1}).formatRgb());
+                el.setAttribute(opacity, String(+(c.opacity * (isNaN(has) ? 1 : has)).toFixed(4)));
+            });
+        });
+        return svg;
     }
 
     // The same element of the copy as `live` is of the svg: children are
@@ -20139,7 +21266,7 @@ function (root, d3, forester, phyloXml) {
 
     function downloadAsPdf(graphic) {
         if (!pdfExportAvailable()) {
-            console.error(ERROR + 'PDF export needs the optional jspdf and svg2pdf.js libraries on the page');
+            say('note', 'error', ERROR + 'PDF export needs the optional jspdf and svg2pdf.js libraries on the page');
             return;
         }
         let el = new DOMParser().parseFromString(graphic.text, 'image/svg+xml').documentElement;
@@ -20188,7 +21315,7 @@ function (root, d3, forester, phyloXml) {
             holder.remove();
         }, function (err) {
             holder.remove();
-            console.error(ERROR + 'PDF export failed: ' + err);
+            say('note', 'error', ERROR + 'PDF export failed: ' + err);
         });
     }
 
@@ -20234,7 +21361,7 @@ function (root, d3, forester, phyloXml) {
         renderPng(graphic).then(function (blob) {
             saveAs(blob, downloadFileName(PNG_SUFFIX));
         }, function (err) {
-            console.error(ERROR + 'PNG export failed: ' + err);
+            say('note', 'error', ERROR + 'PNG export failed: ' + err);
         });
     }
 
@@ -20252,7 +21379,7 @@ function (root, d3, forester, phyloXml) {
             return Promise.reject(new Error('this browser cannot paint a canvas of that size'));
         }
         if (target.scale < _pngScale) {
-            console.warn(WARNING + ': PNG exported at ' + target.scale.toFixed(2) + 'x rather than ' + _pngScale
+            say('note', 'warn', WARNING + ': PNG exported at ' + target.scale.toFixed(2) + 'x rather than ' + _pngScale
                 + 'x: the largest image this browser can paint');
         }
         let canvas = target.canvas;
@@ -20313,7 +21440,7 @@ function (root, d3, forester, phyloXml) {
         written.then(function () {
             flashButton(btn, 'Copied ✓');
         }, function (err) {
-            console.error(ERROR + 'copying the PNG failed: ' + err);
+            say('note', 'error', ERROR + 'copying the PNG failed: ' + err);
             flashButton(btn, 'Copy failed');
         });
     }
@@ -20480,7 +21607,17 @@ function (root, d3, forester, phyloXml) {
         return undefined;
     }
 
-    archaeopteryx.launchArchaeopteryx = function (container, fileName, data, config) {
+    archaeopteryx.launchArchaeopteryx = function () {
+        try {
+            return parseAndLaunch.apply(null, arguments);
+        } catch (e) {
+            // its own failures -- a fifth argument, a file that does not
+            // parse -- happen before launch() and its shell are reached
+            recordLaunchFailure(e);
+            throw e;
+        }
+    };
+    function parseAndLaunch(container, fileName, data, config) {
         if (arguments.length > 4) {
             throw new Error(ERROR + 'launchArchaeopteryx() takes exactly (container, fileName,'
                 + ' data, config); the old trailing arguments were removed. The separate settings'
@@ -20508,7 +21645,7 @@ function (root, d3, forester, phyloXml) {
         // added nothing but a prefix, and swallowing them left the caller with
         // a blank page and no way to find out why.
         return archaeopteryx.launch(container, trees, config);
-    };
+    }
 
 
 // --------------------------------------------------------------