@bkazemi/verily 0.9.3 → 0.9.5

package/README.md

@@ -168,7 +168,7 @@ import { init } from '@bkazemi/verily';
 const client = init({ backendUrl: '/api/verily' });
 ```
 
-Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.3/dist/verily.js`. The script defines a global `Verily`.
+Without one, serve `node_modules/@bkazemi/verily/dist/verily.js` yourself, or load it from a CDN such as `https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.5/dist/verily.js`. The script defines a global `Verily`.
 
 Then place the badge wherever the account appears:
 
@@ -370,7 +370,7 @@ A static site only needs the script and the badge markup; the backend runs somew
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.3/dist/verily.js"
+  src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.9.5/dist/verily.js"
   defer
 ></script>
 <verily-badge
@@ -641,6 +641,8 @@ setInterval(
 
 Clone the repository and run `npm ci`. `npm run preview` then shows the badge in every state at http://localhost:3001, with no other setup.
 
+Stylesheets are the `.css` files under `src`. `npm run css` turns each into a `.css.ts` module the code imports, and the build, check and run scripts do this first. Run it yourself after editing a `.css` file when you run a file with `tsx` directly.
+
 The full example also needs Postgres and a GitHub OAuth app, a Discord application or a Google OAuth client (any of them) with the callback URL `http://localhost:3000/api/verily/callback`:
 
 ```sh

package/dist/browser/badge.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: ":host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n}\n* {\n  box-sizing: border-box;\n}\n.badge,\n.peek {\n  border: 1px solid var(--verily-border, #dce2e0);\n  border-radius: 6px;\n  background: var(--verily-surface, #fff);\n  color: var(--verily-text, #202c29);\n  font: var(--verily-font-size, 13px)/1.35\n    var(--verily-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);\n}\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  padding: 3px 5px;\n  text-decoration: none;\n}\nbutton.badge {\n  margin: 0;\n  cursor: pointer;\n}\na[href]:hover,\nbutton.badge:hover {\n  background: var(--verily-hover, #f3f6f4);\n  border-color: var(--verily-border, #dce2e0);\n}\n.badge:focus-visible {\n  outline: 2px solid #357ce5;\n  outline-offset: 2px;\n}\n.name {\n  font-weight: 600;\n  overflow-wrap: anywhere;\n  min-width: 0;\n}\n.more {\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--verily-muted, #65726c);\n}\n.label {\n  display: none;\n  font-size: 11px;\n  color: var(--verily-muted, #65726c);\n}\n.badge:hover .label,\n.badge:focus-within .label {\n  display: inline;\n}\n.icon {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 12px;\n  font-weight: 750;\n}\n.icon .glyph {\n  display: block;\n  width: 12px;\n  height: 12px;\n}\n.mark {\n  display: block;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n}\n.mark.pending {\n  opacity: 0.45;\n}\n/* A dim ring where the account will go; it only spins where motion is welcome. */\n.spinner {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n  opacity: 0.3;\n}\n.divider {\n  flex-shrink: 0;\n  width: 1px;\n  height: 12px;\n  background: var(--verily-border, #dce2e0);\n}\n/* Several accounts, one to a row. The mark stays beside them and the rule runs their height. */\n.badge.stacked {\n  align-items: stretch;\n  padding: 5px 8px 5px 6px;\n  text-align: left;\n}\n.stacked .mark {\n  align-self: center;\n}\n.stacked .divider {\n  height: auto;\n}\n.rows {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n.row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n/*\n * The accounts behind a short pill's count, opened beside it. Shut unless the browser\n * has it open as a popover, so one without popovers never shows it at all.\n */\n.peek {\n  display: none;\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  padding: 8px 10px;\n  width: max-content;\n  max-width: min(320px, calc(100vw - 16px));\n  border-radius: 8px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);\n  pointer-events: none;\n  overflow: hidden;\n}\n/* A row taken out to fit the window: its own display would otherwise keep it showing. */\n.row[hidden] {\n  display: none;\n}\n.peek:popover-open {\n  display: block;\n}\n.peek .via {\n  display: block;\n  margin-top: 6px;\n  font-size: 11px;\n  color: var(--verily-muted, #65726c);\n}\n.provider {\n  display: block;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n}\n.expired .icon {\n  color: #815a12;\n  background: #fbefce;\n}\n.revoked .icon,\n.retired .icon,\n.message .icon {\n  color: #626d69;\n  background: #edf0ee;\n}\n/* Nothing ran out and nothing wants attention: the holder chose this, so it is only quiet. */\n.retired .name {\n  color: var(--verily-muted, #65726c);\n}\n.message {\n  color: var(--verily-muted, #65726c);\n}\n.add {\n  font-weight: 600;\n}\n@media (prefers-reduced-motion: no-preference) {\n  a,\n  button {\n    transition:\n      background 0.12s,\n      border-color 0.12s;\n  }\n  /* The mark is drawn before the answer arrives, so it resolves rather than swaps. */\n  .mark,\n  .mark path {\n    transition:\n      opacity 0.18s ease,\n      stroke 0.18s ease;\n  }\n  .spinner {\n    border-top-color: transparent;\n    opacity: 0.4;\n    animation: verily-spin 0.7s linear infinite;\n  }\n}\n@keyframes verily-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+export default _default;

package/dist/browser/badge.css.js

@@ -0,0 +1,2 @@
+// Generated from badge.css by scripts/css.mjs. Do not edit.
+export default ":host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n}\n* {\n  box-sizing: border-box;\n}\n.badge,\n.peek {\n  border: 1px solid var(--verily-border, #dce2e0);\n  border-radius: 6px;\n  background: var(--verily-surface, #fff);\n  color: var(--verily-text, #202c29);\n  font: var(--verily-font-size, 13px)/1.35\n    var(--verily-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);\n}\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  padding: 3px 5px;\n  text-decoration: none;\n}\nbutton.badge {\n  margin: 0;\n  cursor: pointer;\n}\na[href]:hover,\nbutton.badge:hover {\n  background: var(--verily-hover, #f3f6f4);\n  border-color: var(--verily-border, #dce2e0);\n}\n.badge:focus-visible {\n  outline: 2px solid #357ce5;\n  outline-offset: 2px;\n}\n.name {\n  font-weight: 600;\n  overflow-wrap: anywhere;\n  min-width: 0;\n}\n.more {\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--verily-muted, #65726c);\n}\n.label {\n  display: none;\n  font-size: 11px;\n  color: var(--verily-muted, #65726c);\n}\n.badge:hover .label,\n.badge:focus-within .label {\n  display: inline;\n}\n.icon {\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 12px;\n  font-weight: 750;\n}\n.icon .glyph {\n  display: block;\n  width: 12px;\n  height: 12px;\n}\n.mark {\n  display: block;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n}\n.mark.pending {\n  opacity: 0.45;\n}\n/* A dim ring where the account will go; it only spins where motion is welcome. */\n.spinner {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 2px solid currentColor;\n  opacity: 0.3;\n}\n.divider {\n  flex-shrink: 0;\n  width: 1px;\n  height: 12px;\n  background: var(--verily-border, #dce2e0);\n}\n/* Several accounts, one to a row. The mark stays beside them and the rule runs their height. */\n.badge.stacked {\n  align-items: stretch;\n  padding: 5px 8px 5px 6px;\n  text-align: left;\n}\n.stacked .mark {\n  align-self: center;\n}\n.stacked .divider {\n  height: auto;\n}\n.rows {\n  display: grid;\n  gap: 4px;\n  min-width: 0;\n}\n.row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n/*\n * The accounts behind a short pill's count, opened beside it. Shut unless the browser\n * has it open as a popover, so one without popovers never shows it at all.\n */\n.peek {\n  display: none;\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  padding: 8px 10px;\n  width: max-content;\n  max-width: min(320px, calc(100vw - 16px));\n  border-radius: 8px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);\n  pointer-events: none;\n  overflow: hidden;\n}\n/* A row taken out to fit the window: its own display would otherwise keep it showing. */\n.row[hidden] {\n  display: none;\n}\n.peek:popover-open {\n  display: block;\n}\n.peek .via {\n  display: block;\n  margin-top: 6px;\n  font-size: 11px;\n  color: var(--verily-muted, #65726c);\n}\n.provider {\n  display: block;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n}\n.expired .icon {\n  color: #815a12;\n  background: #fbefce;\n}\n.revoked .icon,\n.retired .icon,\n.message .icon {\n  color: #626d69;\n  background: #edf0ee;\n}\n/* Nothing ran out and nothing wants attention: the holder chose this, so it is only quiet. */\n.retired .name {\n  color: var(--verily-muted, #65726c);\n}\n.message {\n  color: var(--verily-muted, #65726c);\n}\n.add {\n  font-weight: 600;\n}\n@media (prefers-reduced-motion: no-preference) {\n  a,\n  button {\n    transition:\n      background 0.12s,\n      border-color 0.12s;\n  }\n  /* The mark is drawn before the answer arrives, so it resolves rather than swaps. */\n  .mark,\n  .mark path {\n    transition:\n      opacity 0.18s ease,\n      stroke 0.18s ease;\n  }\n  .spinner {\n    border-top-color: transparent;\n    opacity: 0.4;\n    animation: verily-spin 0.7s linear infinite;\n  }\n}\n@keyframes verily-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";

package/dist/browser/badge.js

@@ -1,72 +1,8 @@
 import { externalName, statusLabel } from '../core/index.js';
+import badgeCss from './badge.css.js';
 import { boxMark, clockMark, dashMark, markStyles, paintMark, verificationMark } from './mark.js';
 import { providerMark } from './provider-mark.js';
-const styles = `
-  :host { display: inline-block; max-width: 100%; vertical-align: middle; }
-  * { box-sizing: border-box; }
-  .badge, .peek {
-    border: 1px solid var(--verily-border, #dce2e0); border-radius: 6px;
-    background: var(--verily-surface, #fff); color: var(--verily-text, #202c29);
-    font: var(--verily-font-size, 13px)/1.35
-      var(--verily-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  }
-  .badge {
-    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 5px;
-    text-decoration: none;
-  }
-  button.badge { margin: 0; cursor: pointer; }
-  a[href]:hover, button.badge:hover { background: var(--verily-hover, #f3f6f4); border-color: var(--verily-border, #dce2e0); }
-  .badge:focus-visible { outline: 2px solid #357ce5; outline-offset: 2px; }
-  .name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
-  .more { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--verily-muted, #65726c); }
-  .label { display: none; font-size: 11px; color: var(--verily-muted, #65726c); }
-  .badge:hover .label, .badge:focus-within .label { display: inline; }
-  .icon { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 750; }
-  .icon .glyph { display: block; width: 12px; height: 12px; }
-  .mark { display: block; flex-shrink: 0; width: 20px; height: 20px; }
-  .mark.pending { opacity: .45; }
-  /* A dim ring where the account will go; it only spins where motion is welcome. */
-  .spinner {
-    flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%;
-    border: 2px solid currentColor; opacity: .3;
-  }
-  .divider { flex-shrink: 0; width: 1px; height: 12px; background: var(--verily-border, #dce2e0); }
-  /* Several accounts, one to a row. The mark stays beside them and the rule runs their height. */
-  .badge.stacked { align-items: stretch; padding: 5px 8px 5px 6px; text-align: left; }
-  .stacked .mark { align-self: center; }
-  .stacked .divider { height: auto; }
-  .rows { display: grid; gap: 4px; min-width: 0; }
-  .row { display: flex; align-items: center; gap: 6px; min-width: 0; }
-  /*
-   * The accounts behind a short pill's count, opened beside it. Shut unless the browser
-   * has it open as a popover, so one without popovers never shows it at all.
-   */
-  .peek {
-    display: none; position: fixed; inset: auto; margin: 0; padding: 8px 10px;
-    width: max-content; max-width: min(320px, calc(100vw - 16px));
-    border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); pointer-events: none;
-    overflow: hidden;
-  }
-  /* A row taken out to fit the window: its own display would otherwise keep it showing. */
-  .row[hidden] { display: none; }
-  .peek:popover-open { display: block; }
-  .peek .via { display: block; margin-top: 6px; font-size: 11px; color: var(--verily-muted, #65726c); }
-  .provider { display: block; flex-shrink: 0; width: 14px; height: 14px; }
-  .expired .icon { color: #815a12; background: #fbefce; }
-  .revoked .icon, .retired .icon, .message .icon { color: #626d69; background: #edf0ee; }
-  /* Nothing ran out and nothing wants attention: the holder chose this, so it is only quiet. */
-  .retired .name { color: var(--verily-muted, #65726c); }
-  .message { color: var(--verily-muted, #65726c); }
-  .add { font-weight: 600; }
-  @media (prefers-reduced-motion: no-preference) {
-    a, button { transition: background .12s, border-color .12s; }
-    /* The mark is drawn before the answer arrives, so it resolves rather than swaps. */
-    .mark, .mark path { transition: opacity .18s ease, stroke .18s ease; }
-    .spinner { border-top-color: transparent; opacity: .4; animation: verily-spin .7s linear infinite; }
-  }
-  @keyframes verily-spin { to { transform: rotate(360deg); } }
-  ${markStyles}
-`;
+const styles = badgeCss + markStyles;
 /** Built once: a re-render adopts the same sheet rather than reparsing the CSS. */
 let sheet;
 /** The shadow host already built inside an element, kept so refreshes reuse it. */

package/dist/browser/connect-dialog.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: ".steps > p:first-child {\n  margin-top: 0;\n}\n.choices {\n  display: grid;\n  gap: 8px;\n  margin-top: 16px;\n}\n/* With a way back beside it, the heading sits by that and not in the middle. */\nheader.backed h2 {\n  margin-right: auto;\n}\n.choices .action {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.choices .more {\n  margin-left: auto;\n  color: #6b786f;\n  font-weight: 500;\n  font-size: 12px;\n}\n.row.start {\n  justify-content: start;\n}\n/* The block scrolls and its frame does not, so the copy button stays in its corner. */\n.code {\n  position: relative;\n  margin: 10px 0;\n}\npre {\n  margin: 0;\n  padding: 10px 64px 10px 12px;\n  border: 1px solid #e0e6df;\n  border-radius: 8px;\n  background: #f6f8f5;\n  font:\n    12px/1.5 ui-monospace,\n    monospace;\n  white-space: pre;\n  overflow-x: auto;\n}\n.code .action {\n  position: absolute;\n  top: 9px;\n  right: 9px;\n  padding: 3px 8px;\n  font-size: 11px;\n}\nlabel {\n  display: grid;\n  gap: 4px;\n  margin-top: 12px;\n  font-weight: 600;\n}\ninput[type='url'],\ninput[type='email'],\ninput[type='tel'],\ninput[type='text'],\ntextarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid #cfd8d2;\n  border-radius: 8px;\n  font:\n    13px/1.4 system-ui,\n    sans-serif;\n  color: inherit;\n  background: #fff;\n}\ntextarea {\n  font-family: ui-monospace, monospace;\n  font-size: 12px;\n  resize: vertical;\n}\nfieldset {\n  margin: 16px 0 0;\n  padding: 10px 14px;\n  border: 1px solid #e0e6df;\n  border-radius: 10px;\n}\nlegend {\n  padding: 0 4px;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin-top: 4px;\n  font-weight: 500;\n}\n/* A radio has no baseline to speak of, so it is set in the middle of the label's first line. */\nfieldset input {\n  flex-shrink: 0;\n  align-self: flex-start;\n  width: 13px;\n  height: 13px;\n  font: inherit;\n  margin-top: 4px;\n  margin-top: calc((1lh - 13px) / 2);\n  margin-bottom: 0;\n}\n.error {\n  color: #9b2c33;\n}\n";
+export default _default;

package/dist/browser/connect-dialog.css.js

@@ -0,0 +1,2 @@
+// Generated from connect-dialog.css by scripts/css.mjs. Do not edit.
+export default ".steps > p:first-child {\n  margin-top: 0;\n}\n.choices {\n  display: grid;\n  gap: 8px;\n  margin-top: 16px;\n}\n/* With a way back beside it, the heading sits by that and not in the middle. */\nheader.backed h2 {\n  margin-right: auto;\n}\n.choices .action {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.choices .more {\n  margin-left: auto;\n  color: #6b786f;\n  font-weight: 500;\n  font-size: 12px;\n}\n.row.start {\n  justify-content: start;\n}\n/* The block scrolls and its frame does not, so the copy button stays in its corner. */\n.code {\n  position: relative;\n  margin: 10px 0;\n}\npre {\n  margin: 0;\n  padding: 10px 64px 10px 12px;\n  border: 1px solid #e0e6df;\n  border-radius: 8px;\n  background: #f6f8f5;\n  font:\n    12px/1.5 ui-monospace,\n    monospace;\n  white-space: pre;\n  overflow-x: auto;\n}\n.code .action {\n  position: absolute;\n  top: 9px;\n  right: 9px;\n  padding: 3px 8px;\n  font-size: 11px;\n}\nlabel {\n  display: grid;\n  gap: 4px;\n  margin-top: 12px;\n  font-weight: 600;\n}\ninput[type='url'],\ninput[type='email'],\ninput[type='tel'],\ninput[type='text'],\ntextarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid #cfd8d2;\n  border-radius: 8px;\n  font:\n    13px/1.4 system-ui,\n    sans-serif;\n  color: inherit;\n  background: #fff;\n}\ntextarea {\n  font-family: ui-monospace, monospace;\n  font-size: 12px;\n  resize: vertical;\n}\nfieldset {\n  margin: 16px 0 0;\n  padding: 10px 14px;\n  border: 1px solid #e0e6df;\n  border-radius: 10px;\n}\nlegend {\n  padding: 0 4px;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  margin-top: 4px;\n  font-weight: 500;\n}\n/* A radio has no baseline to speak of, so it is set in the middle of the label's first line. */\nfieldset input {\n  flex-shrink: 0;\n  align-self: flex-start;\n  width: 13px;\n  height: 13px;\n  font: inherit;\n  margin-top: 4px;\n  margin-top: calc((1lh - 13px) / 2);\n  margin-bottom: 0;\n}\n.error {\n  color: #9b2c33;\n}\n";

package/dist/browser/connect-dialog.js

@@ -1,29 +1,8 @@
-import { accountCard, backMark, closeMark, linkMark, node, namedCard, outward, stampLink, styles, } from './evidence-dialog.js';
+import { accountCard, backMark, closeMark, holdPage, linkMark, node, namedCard, outward, stampLink, styles, } from './evidence-dialog.js';
 import { providerMark } from './provider-mark.js';
+import connectCss from './connect-dialog.css.js';
 import { version } from '../version.js';
-const connectStyles = `
-  ${styles}
-  .steps > p:first-child { margin-top: 0; }
-  .choices { display: grid; gap: 8px; margin-top: 16px; }
-  /* With a way back beside it, the heading sits by that and not in the middle. */
-  header.backed h2 { margin-right: auto; }
-  .choices .action { display: flex; align-items: center; gap: 8px; }
-  .choices .more { margin-left: auto; color: #6b786f; font-weight: 500; font-size: 12px; }
-  .row.start { justify-content: start; }
-  /* The block scrolls and its frame does not, so the copy button stays in its corner. */
-  .code { position: relative; margin: 10px 0; }
-  pre { margin: 0; padding: 10px 64px 10px 12px; border: 1px solid #e0e6df; border-radius: 8px; background: #f6f8f5; font: 12px/1.5 ui-monospace, monospace; white-space: pre; overflow-x: auto; }
-  .code .action { position: absolute; top: 9px; right: 9px; padding: 3px 8px; font-size: 11px; }
-  label { display: grid; gap: 4px; margin-top: 12px; font-weight: 600; }
-  input[type=url], input[type=email], input[type=tel], input[type=text], textarea { width: 100%; padding: 8px 10px; border: 1px solid #cfd8d2; border-radius: 8px; font: 13px/1.4 system-ui, sans-serif; color: inherit; background: #fff; }
-  textarea { font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }
-  fieldset { margin: 16px 0 0; padding: 10px 14px; border: 1px solid #e0e6df; border-radius: 10px; }
-  legend { padding: 0 4px; color: #6b786f; font-size: 11px; font-weight: 550; }
-  fieldset label { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-weight: 500; }
-  /* A radio has no baseline to speak of, so it is set in the middle of the label's first line. */
-  fieldset input { flex-shrink: 0; align-self: flex-start; width: 13px; height: 13px; font: inherit; margin-top: 4px; margin-top: calc((1lh - 13px) / 2); margin-bottom: 0; }
-  .error { color: #9b2c33; }
-`;
+const connectStyles = styles + connectCss;
 /** Puts a copy control on a block the holder must reproduce exactly, as the flow page does. */
 function codeBlock(code) {
     const block = node('div', '', 'code');
@@ -528,6 +507,7 @@ renew) {
             .catch(() => { })
             .then(() => resolve(outcome));
     }, { once: true }));
+    holdPage(dialog);
     dialog.showModal();
     void choose();
     return closed;

package/dist/browser/evidence-dialog.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "* {\n  box-sizing: border-box;\n}\ndialog {\n  width: min(460px, calc(100vw - 32px));\n  max-height: calc(100dvh - 40px);\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  border: 1px solid #dce2de;\n  border-radius: 16px;\n  background: #fff;\n  color: #23312b;\n  box-shadow: 0 24px 90px #10201935;\n  font:\n    13px/1.6 system-ui,\n    sans-serif;\n}\n/* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners.\n   Contain keeps a scroll past its end from scrolling the page behind. */\ndialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n.pane {\n  min-height: 0;\n  padding: 24px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\ndialog::backdrop {\n  background: #15271f66;\n}\nheader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 20px;\n}\nh2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 650;\n  letter-spacing: -0.3px;\n}\nbutton {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #dce2de;\n  border-radius: 8px;\n  background: #fff;\n  color: #52645a;\n  font:\n    20px system-ui,\n    sans-serif;\n  cursor: pointer;\n}\nbutton:hover {\n  background: #f2f5f1;\n}\n.icon {\n  display: grid;\n  place-items: center;\n  padding: 0;\n}\n.icon svg {\n  width: 16px;\n  height: 16px;\n}\n.title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.all {\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  color: #52645a;\n}\n.all:hover {\n  background: #f2f5f1;\n}\n.all svg {\n  width: 16px;\n  height: 16px;\n}\na {\n  color: #245f43;\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\na:focus-visible,\nbutton:focus-visible,\nsummary:focus-visible {\n  outline: 2px solid #357ce5;\n  outline-offset: 3px;\n}\n/* An element given its own display would otherwise go on showing while hidden. */\n[hidden] {\n  display: none !important;\n}\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 16px;\n}\n.mark {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n}\n.provider {\n  width: 14px;\n  height: 14px;\n}\n.state {\n  font-size: 14px;\n  font-weight: 650;\n  line-height: 1.4;\n}\n.muted {\n  color: #6b786f;\n  font-size: 12px;\n}\n.account {\n  position: relative;\n}\n.veiled > :not(.checking) {\n  filter: blur(4px);\n  opacity: 0.55;\n  user-select: none;\n}\n.checking {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  color: #23312b;\n  font-size: 13px;\n  font-weight: 600;\n}\n.spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: spin 0.7s linear infinite;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation: none;\n  }\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.summary .signed {\n  display: inline-block;\n  margin-left: 5px;\n  padding: 0 6px;\n  border: 1px solid #cfdcd3;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 1px;\n}\n.summary a.signed:hover {\n  background: #f2f5f1;\n}\n.summary .signed.bad {\n  border-color: #b3261e;\n  color: #b3261e;\n  font-weight: 650;\n  cursor: help;\n}\n.caution {\n  display: inline-block;\n  margin-left: 3px;\n  color: #a15c00;\n  vertical-align: -1.5px;\n}\n.caution svg {\n  display: block;\n  width: 10px;\n  height: 10px;\n}\n.account {\n  padding: 14px 16px;\n  border: 1px solid #e0e6df;\n  border-radius: 10px;\n  margin-top: 12px;\n}\n.account h3 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0 0 3px;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\n.account a,\n.account strong {\n  font-weight: 650;\n  font-size: 14px;\n}\n/* The account's own name carries that weight; a link inside a line of prose does not. */\n.summary a,\n.method a,\n.additional a {\n  font: inherit;\n}\n.reference {\n  margin-top: 2px;\n}\n/* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.method {\n  margin-top: 8px;\n}\n/* In the corner the heading leaves empty, apart from everything that was checked. */\n.listing {\n  position: absolute;\n  top: 12px;\n  right: 14px;\n  padding: 1px 8px;\n  border: 1px solid #e0e6df;\n  border-radius: 999px;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\n.listing.preferred {\n  border-color: #245f43;\n  color: #245f43;\n}\n/* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n.account.retired {\n  background: #f6f8f5;\n}\n.account.retired .identity > a,\n.account.retired .identity > strong,\n.account.retired .named > a,\n.account.retired .named > strong {\n  color: #6b786f;\n}\n/* The name, then a dot and the account's creation date. The date wraps under a long name. */\n/* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */\n.named {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 14px;\n  margin-left: -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n}\n.since {\n  position: relative;\n  white-space: nowrap;\n}\n/* The dot sits in the gap before the date. */\n.since::before {\n  content: '\u00B7';\n  position: absolute;\n  left: -7px;\n  transform: translateX(-50%);\n}\n.account.retired .mark {\n  opacity: 0.45;\n}\n.group {\n  margin: 20px 0 0;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\nsummary.group {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: fit-content;\n  border-radius: 4px;\n  list-style: none;\n  cursor: pointer;\n}\nsummary::-webkit-details-marker {\n  display: none;\n}\n.fold {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: auto;\n  height: auto;\n  padding: 2px 8px 2px 4px;\n  margin-left: -4px;\n  border: 0;\n  background: none;\n  font:\n    550 12px/1.6 system-ui,\n    sans-serif;\n}\n.fold svg,\nsummary svg {\n  width: 12px;\n  height: 12px;\n}\n.fold[aria-expanded='true'] svg,\ndetails[open] > summary svg {\n  transform: rotate(90deg);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .fold svg,\n  summary svg {\n    transition: transform 0.15s;\n  }\n}\n/* The fold and what the holder may do share a line, until a question needs the whole of it. */\n.bar {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 10px;\n}\n.account .bar .row {\n  margin: 0 0 0 auto;\n}\n.additional {\n  margin-top: 2px;\n  padding-left: 12px;\n}\n.joiner {\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin: 8px auto -4px;\n  color: #90a096;\n}\ndl {\n  margin: 16px 0 0;\n  padding-top: 12px;\n  border-top: 1px solid #e5e9e3;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 5px 16px;\n  font-size: 11px;\n}\ndt {\n  color: #6b786f;\n}\ndd {\n  margin: 0;\n  text-align: right;\n  overflow-wrap: anywhere;\n}\n.explanation {\n  margin-top: 16px;\n}\n.action {\n  width: auto;\n  height: auto;\n  padding: 9px 14px;\n  font:\n    600 13px/1.3 system-ui,\n    sans-serif;\n  color: #23312b;\n  text-align: left;\n}\n.action.primary {\n  border-color: #245f43;\n  background: #245f43;\n  color: #fff;\n}\n.action.primary:hover {\n  background: #1d4f37;\n}\n.action:disabled {\n  opacity: 0.6;\n  cursor: progress;\n}\n.action.danger:hover {\n  border-color: #b3261e;\n  background: #fdecea;\n  color: #b3261e;\n}\n.row {\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  margin-top: 16px;\n}\n.account .row {\n  align-items: center;\n  justify-content: start;\n  flex-wrap: wrap;\n  margin-top: 12px;\n}\n.account .action {\n  padding: 5px 10px;\n  font-size: 12px;\n}\n.account .action.dots {\n  display: grid;\n  place-items: center;\n  align-self: stretch;\n  width: 30px;\n  padding: 0;\n}\n.dots svg {\n  width: 16px;\n  height: 16px;\n}\n/* Placed under its button each time it opens, above the dialog and clipped by none of it. */\n.menu {\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  min-width: 170px;\n  padding: 6px;\n  border: 1px solid #dce2de;\n  border-radius: 10px;\n  background: #fff;\n  color: #23312b;\n  box-shadow: 0 12px 40px #10201930;\n}\n.menu:popover-open {\n  display: grid;\n}\n.account .menu .action {\n  border: 0;\n  border-radius: 6px;\n  padding: 6px 10px;\n  font-weight: 550;\n}\n.menu .danger {\n  color: #b3261e;\n}\n.menu hr {\n  width: 100%;\n  margin: 4px 0;\n  border: 0;\n  border-top: 1px solid #e5e9e3;\n}\nfooter {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  gap: 6px;\n  margin: 20px 0 -8px;\n  color: #9aa9a0;\n  font-size: 11px;\n}\nfooter a {\n  display: flex;\n  color: inherit;\n}\n.logo {\n  display: block;\n  height: 13px;\n}\n/* Four or more accounts on a wide screen: two equal cards to a row. */\n@media (min-width: 960px) {\n  dialog.many {\n    width: min(900px, calc(100vw - 32px));\n  }\n  dialog.many .tiles {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n    margin-top: 12px;\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall as\n       the taller card's part, so the verdicts and details of neighbouring cards line up. */\n  dialog.many .tiles > .account {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n    margin-top: 0;\n  }\n  /* The dates sit at the foot of the third part, so they line up too. */\n  dialog.many .tiles .rest {\n    display: flex;\n    flex-direction: column;\n  }\n  dialog.many .tiles .rest > dl {\n    margin-top: auto;\n  }\n  dialog.many .tiles .rest > :has(+ dl) {\n    margin-bottom: 16px;\n  }\n  /* The site's card is one tile wide, centred over the two columns. */\n  dialog.many .local {\n    width: calc(50% - 6px);\n    margin-inline: auto;\n    text-align: center;\n  }\n  dialog.many .local h3,\n  dialog.many .local .named {\n    justify-content: center;\n  }\n  dialog.many .local .additional {\n    padding-left: 0;\n  }\n}\n";
+export default _default;

package/dist/browser/evidence-dialog.css.js

@@ -0,0 +1,2 @@
+// Generated from evidence-dialog.css by scripts/css.mjs. Do not edit.
+export default "* {\n  box-sizing: border-box;\n}\ndialog {\n  width: min(460px, calc(100vw - 32px));\n  max-height: calc(100dvh - 40px);\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  border: 1px solid #dce2de;\n  border-radius: 16px;\n  background: #fff;\n  color: #23312b;\n  box-shadow: 0 24px 90px #10201935;\n  font:\n    13px/1.6 system-ui,\n    sans-serif;\n}\n/* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners.\n   Contain keeps a scroll past its end from scrolling the page behind. */\ndialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n.pane {\n  min-height: 0;\n  padding: 24px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\ndialog::backdrop {\n  background: #15271f66;\n}\nheader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 20px;\n}\nh2 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 650;\n  letter-spacing: -0.3px;\n}\nbutton {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #dce2de;\n  border-radius: 8px;\n  background: #fff;\n  color: #52645a;\n  font:\n    20px system-ui,\n    sans-serif;\n  cursor: pointer;\n}\nbutton:hover {\n  background: #f2f5f1;\n}\n.icon {\n  display: grid;\n  place-items: center;\n  padding: 0;\n}\n.icon svg {\n  width: 16px;\n  height: 16px;\n}\n.title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.all {\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  color: #52645a;\n}\n.all:hover {\n  background: #f2f5f1;\n}\n.all svg {\n  width: 16px;\n  height: 16px;\n}\na {\n  color: #245f43;\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\na:focus-visible,\nbutton:focus-visible,\nsummary:focus-visible {\n  outline: 2px solid #357ce5;\n  outline-offset: 3px;\n}\n/* An element given its own display would otherwise go on showing while hidden. */\n[hidden] {\n  display: none !important;\n}\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 16px;\n}\n.mark {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n}\n.provider {\n  width: 14px;\n  height: 14px;\n}\n.state {\n  font-size: 14px;\n  font-weight: 650;\n  line-height: 1.4;\n}\n.muted {\n  color: #6b786f;\n  font-size: 12px;\n}\n.account {\n  position: relative;\n}\n.veiled > :not(.checking) {\n  filter: blur(4px);\n  opacity: 0.55;\n  user-select: none;\n}\n.checking {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  color: #23312b;\n  font-size: 13px;\n  font-weight: 600;\n}\n.spinner {\n  width: 14px;\n  height: 14px;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: spin 0.7s linear infinite;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation: none;\n  }\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.summary .signed {\n  display: inline-block;\n  margin-left: 5px;\n  padding: 0 6px;\n  border: 1px solid #cfdcd3;\n  border-radius: 999px;\n  font-size: 10px;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 1px;\n}\n.summary a.signed:hover {\n  background: #f2f5f1;\n}\n.summary .signed.bad {\n  border-color: #b3261e;\n  color: #b3261e;\n  font-weight: 650;\n  cursor: help;\n}\n.caution {\n  display: inline-block;\n  margin-left: 3px;\n  color: #a15c00;\n  vertical-align: -1.5px;\n}\n.caution svg {\n  display: block;\n  width: 10px;\n  height: 10px;\n}\n.account {\n  padding: 14px 16px;\n  border: 1px solid #e0e6df;\n  border-radius: 10px;\n  margin-top: 12px;\n}\n.account h3 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin: 0 0 3px;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\n.account a,\n.account strong {\n  font-weight: 650;\n  font-size: 14px;\n}\n/* The account's own name carries that weight; a link inside a line of prose does not. */\n.summary a,\n.method a,\n.additional a {\n  font: inherit;\n}\n.reference {\n  margin-top: 2px;\n}\n/* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */\n.fingerprint {\n  font-family: ui-monospace, monospace;\n  text-wrap: balance;\n}\n.fingerprint span {\n  display: inline-block;\n  margin-right: 0.5ch;\n}\n.method {\n  margin-top: 8px;\n}\n/* In the corner the heading leaves empty, apart from everything that was checked. */\n.listing {\n  position: absolute;\n  top: 12px;\n  right: 14px;\n  padding: 1px 8px;\n  border: 1px solid #e0e6df;\n  border-radius: 999px;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\n.listing.preferred {\n  border-color: #245f43;\n  color: #245f43;\n}\n/* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n.account.retired {\n  background: #f6f8f5;\n}\n.account.retired .identity > a,\n.account.retired .identity > strong,\n.account.retired .named > a,\n.account.retired .named > strong {\n  color: #6b786f;\n}\n/* The name, then a dot and the account's creation date. The date wraps under a long name. */\n/* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */\n.named {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 14px;\n  margin-left: -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n}\n.since {\n  position: relative;\n  white-space: nowrap;\n}\n/* The dot sits in the gap before the date. */\n.since::before {\n  content: '·';\n  position: absolute;\n  left: -7px;\n  transform: translateX(-50%);\n}\n.account.retired .mark {\n  opacity: 0.45;\n}\n.group {\n  margin: 20px 0 0;\n  color: #6b786f;\n  font-size: 11px;\n  font-weight: 550;\n}\nsummary.group {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: fit-content;\n  border-radius: 4px;\n  list-style: none;\n  cursor: pointer;\n}\nsummary::-webkit-details-marker {\n  display: none;\n}\n.fold {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: auto;\n  height: auto;\n  padding: 2px 8px 2px 4px;\n  margin-left: -4px;\n  border: 0;\n  background: none;\n  font:\n    550 12px/1.6 system-ui,\n    sans-serif;\n}\n.fold svg,\nsummary svg {\n  width: 12px;\n  height: 12px;\n}\n.fold[aria-expanded='true'] svg,\ndetails[open] > summary svg {\n  transform: rotate(90deg);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .fold svg,\n  summary svg {\n    transition: transform 0.15s;\n  }\n}\n/* The fold and what the holder may do share a line, until a question needs the whole of it. */\n.bar {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 10px;\n}\n.account .bar .row {\n  margin: 0 0 0 auto;\n}\n.additional {\n  margin-top: 2px;\n  padding-left: 12px;\n}\n.joiner {\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin: 8px auto -4px;\n  color: #90a096;\n}\ndl {\n  margin: 16px 0 0;\n  padding-top: 12px;\n  border-top: 1px solid #e5e9e3;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 5px 16px;\n  font-size: 11px;\n}\ndt {\n  color: #6b786f;\n}\ndd {\n  margin: 0;\n  text-align: right;\n  overflow-wrap: anywhere;\n}\n.explanation {\n  margin-top: 16px;\n}\n.action {\n  width: auto;\n  height: auto;\n  padding: 9px 14px;\n  font:\n    600 13px/1.3 system-ui,\n    sans-serif;\n  color: #23312b;\n  text-align: left;\n}\n.action.primary {\n  border-color: #245f43;\n  background: #245f43;\n  color: #fff;\n}\n.action.primary:hover {\n  background: #1d4f37;\n}\n.action:disabled {\n  opacity: 0.6;\n  cursor: progress;\n}\n.action.danger:hover {\n  border-color: #b3261e;\n  background: #fdecea;\n  color: #b3261e;\n}\n.row {\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  margin-top: 16px;\n}\n.account .row {\n  align-items: center;\n  justify-content: start;\n  flex-wrap: wrap;\n  margin-top: 12px;\n}\n.account .action {\n  padding: 5px 10px;\n  font-size: 12px;\n}\n.account .action.dots {\n  display: grid;\n  place-items: center;\n  align-self: stretch;\n  width: 30px;\n  padding: 0;\n}\n.dots svg {\n  width: 16px;\n  height: 16px;\n}\n/* Placed under its button each time it opens, above the dialog and clipped by none of it. */\n.menu {\n  position: fixed;\n  inset: auto;\n  margin: 0;\n  min-width: 170px;\n  padding: 6px;\n  border: 1px solid #dce2de;\n  border-radius: 10px;\n  background: #fff;\n  color: #23312b;\n  box-shadow: 0 12px 40px #10201930;\n}\n.menu:popover-open {\n  display: grid;\n}\n.account .menu .action {\n  border: 0;\n  border-radius: 6px;\n  padding: 6px 10px;\n  font-weight: 550;\n}\n.menu .danger {\n  color: #b3261e;\n}\n.menu hr {\n  width: 100%;\n  margin: 4px 0;\n  border: 0;\n  border-top: 1px solid #e5e9e3;\n}\nfooter {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  gap: 6px;\n  margin: 20px 0 -8px;\n  color: #9aa9a0;\n  font-size: 11px;\n}\nfooter a {\n  display: flex;\n  color: inherit;\n}\n.logo {\n  display: block;\n  height: 13px;\n}\n/* Four or more accounts on a wide screen: two equal cards to a row. */\n@media (min-width: 960px) {\n  dialog.many {\n    width: min(900px, calc(100vw - 32px));\n  }\n  dialog.many .tiles {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n    margin-top: 12px;\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall as\n       the taller card's part, so the verdicts and details of neighbouring cards line up. */\n  dialog.many .tiles > .account {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n    margin-top: 0;\n  }\n  /* The dates sit at the foot of the third part, so they line up too. */\n  dialog.many .tiles .rest {\n    display: flex;\n    flex-direction: column;\n  }\n  dialog.many .tiles .rest > dl {\n    margin-top: auto;\n  }\n  dialog.many .tiles .rest > :has(+ dl) {\n    margin-bottom: 16px;\n  }\n  /* The site's card is one tile wide, centred over the two columns. */\n  dialog.many .local {\n    width: calc(50% - 6px);\n    margin-inline: auto;\n    text-align: center;\n  }\n  dialog.many .local h3,\n  dialog.many .local .named {\n    justify-content: center;\n  }\n  dialog.many .local .additional {\n    padding-left: 0;\n  }\n}\n";

package/dist/browser/evidence-dialog.d.ts

@@ -1,7 +1,12 @@
 import { type Evidence, type ExternalAccount } from '../core/index.js';
 /** The logotype as a link to the project, as both dialogs carry it in their footer. */
 export declare function stampLink(): HTMLAnchorElement;
-export declare const styles = "\n  * { box-sizing: border-box; }\n  dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #dce2de; border-radius: 16px; background: #fff; color: #23312b; box-shadow: 0 24px 90px #10201935; font: 13px/1.6 system-ui, sans-serif; }\n  /* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners. */\n  dialog[open] { display: flex; flex-direction: column; }\n  .pane { min-height: 0; padding: 24px; overflow-y: auto; }\n  dialog::backdrop { background: #15271f66; }\n  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }\n  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }\n  button:hover { background: #f2f5f1; }\n  .icon { display: grid; place-items: center; padding: 0; }\n  .icon svg { width: 16px; height: 16px; }\n  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }\n  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }\n  .all:hover { background: #f2f5f1; }\n  .all svg { width: 16px; height: 16px; }\n  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }\n  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }\n  /* An element given its own display would otherwise go on showing while hidden. */\n  [hidden] { display: none !important; }\n  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }\n  .mark { width: 36px; height: 36px; flex-shrink: 0; }\n  .provider { width: 14px; height: 14px; }\n  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }\n  .muted { color: #6b786f; font-size: 12px; }\n  .account { position: relative; }\n  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }\n  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }\n  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }\n  /* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n  .summary .signed { display: inline-block; margin-left: 5px; padding: 0 6px; border: 1px solid #cfdcd3; border-radius: 999px; font-size: 10px; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: 1px; }\n  .summary a.signed:hover { background: #f2f5f1; }\n  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }\n  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }\n  .caution svg { display: block; width: 10px; height: 10px; }\n  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }\n  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .account a, .account strong { font-weight: 650; font-size: 14px; }\n  /* The account's own name carries that weight; a link inside a line of prose does not. */\n  .summary a, .method a, .additional a { font: inherit; }\n  .reference { margin-top: 2px; }\n  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */\n  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }\n  .fingerprint span { display: inline-block; margin-right: .5ch; }\n  .method { margin-top: 8px; }\n  /* In the corner the heading leaves empty, apart from everything that was checked. */\n  .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }\n  .listing.preferred { border-color: #245f43; color: #245f43; }\n  /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */\n  .account.retired { background: #f6f8f5; }\n  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }\n  /* The name, then a dot and the account's creation date. The date wraps under a long name. */\n  /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */\n  .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }\n  .since { position: relative; white-space: nowrap; }\n  /* The dot sits in the gap before the date. */\n  .since::before { content: \"\u00B7\"; position: absolute; left: -7px; transform: translateX(-50%); }\n  .account.retired .mark { opacity: .45; }\n  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }\n  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }\n  summary::-webkit-details-marker { display: none; }\n  .fold { display: flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 2px 8px 2px 4px; margin-left: -4px; border: 0; background: none; font: 550 12px/1.6 system-ui, sans-serif; }\n  .fold svg, summary svg { width: 12px; height: 12px; }\n  .fold[aria-expanded=\"true\"] svg, details[open] > summary svg { transform: rotate(90deg); }\n  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }\n  /* The fold and what the holder may do share a line, until a question needs the whole of it. */\n  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }\n  .account .bar .row { margin: 0 0 0 auto; }\n  .additional { margin-top: 2px; padding-left: 12px; }\n  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }\n  dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e9e3; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 11px; }\n  dt { color: #6b786f; }\n  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }\n  .explanation { margin-top: 16px; }\n  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }\n  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }\n  .action.primary:hover { background: #1d4f37; }\n  .action:disabled { opacity: .6; cursor: progress; }\n  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }\n  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }\n  .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }\n  .account .action { padding: 5px 10px; font-size: 12px; }\n  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }\n  .dots svg { width: 16px; height: 16px; }\n  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */\n  .menu { position: fixed; inset: auto; margin: 0; min-width: 170px; padding: 6px; border: 1px solid #dce2de; border-radius: 10px; background: #fff; color: #23312b; box-shadow: 0 12px 40px #10201930; }\n  .menu:popover-open { display: grid; }\n  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }\n  .menu .danger { color: #b3261e; }\n  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }\n  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }\n  footer a { display: flex; color: inherit; }\n  .logo { display: block; height: 13px; }\n  \n  @media (prefers-reduced-motion: no-preference) {\n    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }\n  }\n  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }\n\n";
+/**
+ * Stops the page behind an open dialog from scrolling, and puts back the
+ * page's own inline styles once the last open dialog closes.
+ */
+export declare function holdPage(dialog: HTMLDialogElement): void;
+export declare const styles: string;
 export declare function node<K extends keyof HTMLElementTagNameMap>(tag: K, text?: string, className?: string): HTMLElementTagNameMap[K];
 /**
  * Points an anchor out of the dialog. Every link here opens in a new tab: the dialog is

package/dist/browser/evidence-dialog.js

@@ -1,5 +1,6 @@
 import { attestationLabel, externalId, externalIdGroups, externalLink, externalName, externalSince, lastProved, localSide, proofTitle, statusLabel, } from '../core/index.js';
 import { markStyles, verificationMark } from './mark.js';
+import dialogCss from './evidence-dialog.css.js';
 import { providerMark } from './provider-mark.js';
 import { onSignatureResult, signature, standing } from './signed.js';
 import { projectUrl, verilyLogo } from './logo.js';
@@ -11,104 +12,37 @@ export function stampLink() {
     return link;
 }
 const openDialogs = new WeakMap();
-export const styles = `
-  * { box-sizing: border-box; }
-  dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #dce2de; border-radius: 16px; background: #fff; color: #23312b; box-shadow: 0 24px 90px #10201935; font: 13px/1.6 system-ui, sans-serif; }
-  /* The pane scrolls inside the dialog, which clips its scrollbar to the rounded corners. */
-  dialog[open] { display: flex; flex-direction: column; }
-  .pane { min-height: 0; padding: 24px; overflow-y: auto; }
-  dialog::backdrop { background: #15271f66; }
-  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
-  h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.3px; }
-  button { width: 32px; height: 32px; border: 1px solid #dce2de; border-radius: 8px; background: #fff; color: #52645a; font: 20px system-ui, sans-serif; cursor: pointer; }
-  button:hover { background: #f2f5f1; }
-  .icon { display: grid; place-items: center; padding: 0; }
-  .icon svg { width: 16px; height: 16px; }
-  .title { display: flex; align-items: center; gap: 6px; min-width: 0; }
-  .all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52645a; }
-  .all:hover { background: #f2f5f1; }
-  .all svg { width: 16px; height: 16px; }
-  a { color: #245f43; text-underline-offset: 3px; overflow-wrap: anywhere; }
-  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #357ce5; outline-offset: 3px; }
-  /* An element given its own display would otherwise go on showing while hidden. */
-  [hidden] { display: none !important; }
-  .summary { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
-  .mark { width: 36px; height: 36px; flex-shrink: 0; }
-  .provider { width: 14px; height: 14px; }
-  .state { font-size: 14px; font-weight: 650; line-height: 1.4; }
-  .muted { color: #6b786f; font-size: 12px; }
-  .account { position: relative; }
-  .veiled > :not(.checking) { filter: blur(4px); opacity: .55; user-select: none; }
-  .checking { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #23312b; font-size: 13px; font-weight: 600; }
-  .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
-  @keyframes spin { to { transform: rotate(360deg); } }
-  @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
-  /* The "signed" pill after the verifier's name, one size smaller than the line it sits on. */
-  .summary .signed { display: inline-block; margin-left: 5px; padding: 0 6px; border: 1px solid #cfdcd3; border-radius: 999px; font-size: 10px; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: 1px; }
-  .summary a.signed:hover { background: #f2f5f1; }
-  .summary .signed.bad { border-color: #b3261e; color: #b3261e; font-weight: 650; cursor: help; }
-  .caution { display: inline-block; margin-left: 3px; color: #a15c00; vertical-align: -1.5px; }
-  .caution svg { display: block; width: 10px; height: 10px; }
-  .account { padding: 14px 16px; border: 1px solid #e0e6df; border-radius: 10px; margin-top: 12px; }
-  .account h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #6b786f; font-size: 11px; font-weight: 550; }
-  .account a, .account strong { font-weight: 650; font-size: 14px; }
-  /* The account's own name carries that weight; a link inside a line of prose does not. */
-  .summary a, .method a, .additional a { font: inherit; }
-  .reference { margin-top: 2px; }
-  /* A fingerprint in fours: it breaks between groups, and copies as one unbroken word. */
-  .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }
-  .fingerprint span { display: inline-block; margin-right: .5ch; }
-  .method { margin-top: 8px; }
-  /* In the corner the heading leaves empty, apart from everything that was checked. */
-  .listing { position: absolute; top: 12px; right: 14px; padding: 1px 8px; border: 1px solid #e0e6df; border-radius: 999px; color: #6b786f; font-size: 11px; font-weight: 550; }
-  .listing.preferred { border-color: #245f43; color: #245f43; }
-  /* Quiet, as its pill is: the surface and the name step back, and the controls do not. */
-  .account.retired { background: #f6f8f5; }
-  .account.retired > a, .account.retired > strong, .account.retired > .named > a, .account.retired > .named > strong { color: #6b786f; }
-  /* The name, then a dot and the account's creation date. The date wraps under a long name. */
-  /* Clipped 4px left of the text, which hides the dot when the date wraps to a new line. */
-  .named { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin-left: -4px; padding-left: 4px; overflow-x: clip; }
-  .since { position: relative; white-space: nowrap; }
-  /* The dot sits in the gap before the date. */
-  .since::before { content: "·"; position: absolute; left: -7px; transform: translateX(-50%); }
-  .account.retired .mark { opacity: .45; }
-  .group { margin: 20px 0 0; color: #6b786f; font-size: 11px; font-weight: 550; }
-  summary.group { display: flex; align-items: center; gap: 4px; width: fit-content; border-radius: 4px; list-style: none; cursor: pointer; }
-  summary::-webkit-details-marker { display: none; }
-  .fold { display: flex; align-items: center; gap: 4px; width: auto; height: auto; padding: 2px 8px 2px 4px; margin-left: -4px; border: 0; background: none; font: 550 12px/1.6 system-ui, sans-serif; }
-  .fold svg, summary svg { width: 12px; height: 12px; }
-  .fold[aria-expanded="true"] svg, details[open] > summary svg { transform: rotate(90deg); }
-  @media (prefers-reduced-motion: no-preference) { .fold svg, summary svg { transition: transform .15s; } }
-  /* The fold and what the holder may do share a line, until a question needs the whole of it. */
-  .bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-  .account .bar .row { margin: 0 0 0 auto; }
-  .additional { margin-top: 2px; padding-left: 12px; }
-  .joiner { display: block; width: 20px; height: 20px; margin: 8px auto -4px; color: #90a096; }
-  dl { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5e9e3; display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 11px; }
-  dt { color: #6b786f; }
-  dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
-  .explanation { margin-top: 16px; }
-  .action { width: auto; height: auto; padding: 9px 14px; font: 600 13px/1.3 system-ui, sans-serif; color: #23312b; text-align: left; }
-  .action.primary { border-color: #245f43; background: #245f43; color: #fff; }
-  .action.primary:hover { background: #1d4f37; }
-  .action:disabled { opacity: .6; cursor: progress; }
-  .action.danger:hover { border-color: #b3261e; background: #fdecea; color: #b3261e; }
-  .row { display: flex; justify-content: end; gap: 8px; margin-top: 16px; }
-  .account .row { align-items: center; justify-content: start; flex-wrap: wrap; margin-top: 12px; }
-  .account .action { padding: 5px 10px; font-size: 12px; }
-  .account .action.dots { display: grid; place-items: center; align-self: stretch; width: 30px; padding: 0; }
-  .dots svg { width: 16px; height: 16px; }
-  /* Placed under its button each time it opens, above the dialog and clipped by none of it. */
-  .menu { position: fixed; inset: auto; margin: 0; min-width: 170px; padding: 6px; border: 1px solid #dce2de; border-radius: 10px; background: #fff; color: #23312b; box-shadow: 0 12px 40px #10201930; }
-  .menu:popover-open { display: grid; }
-  .account .menu .action { border: 0; border-radius: 6px; padding: 6px 10px; font-weight: 550; }
-  .menu .danger { color: #b3261e; }
-  .menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #e5e9e3; }
-  footer { display: flex; align-items: center; justify-content: start; gap: 6px; margin: 20px 0 -8px; color: #9aa9a0; font-size: 11px; }
-  footer a { display: flex; color: inherit; }
-  .logo { display: block; height: 13px; }
-  ${markStyles}
-`;
+let holds = 0;
+let release = () => { };
+/**
+ * Stops the page behind an open dialog from scrolling, and puts back the
+ * page's own inline styles once the last open dialog closes.
+ */
+export function holdPage(dialog) {
+    if (holds++ === 0) {
+        const { style, clientWidth } = document.documentElement;
+        // Longhands, since the overflow shorthand reads empty when only one axis is set.
+        const held = ['overflow-x', 'overflow-y', 'scrollbar-gutter'];
+        const saved = held.map((name) => [
+            style.getPropertyValue(name),
+            style.getPropertyPriority(name),
+        ]);
+        // Keep the space of a hidden scrollbar so the page does not shift sideways.
+        if (innerWidth > clientWidth)
+            style.setProperty('scrollbar-gutter', 'stable', 'important');
+        style.setProperty('overflow-x', 'hidden', 'important');
+        style.setProperty('overflow-y', 'hidden', 'important');
+        release = () => held.forEach((name, i) => {
+            const [value, priority] = saved[i];
+            if (value)
+                style.setProperty(name, value, priority);
+            else
+                style.removeProperty(name);
+        });
+    }
+    dialog.addEventListener('close', () => --holds === 0 && release(), { once: true });
+}
+export const styles = dialogCss + markStyles;
 export function node(tag, text = '', className = '') {
     const element = document.createElement(tag);
     element.textContent = text;
@@ -259,6 +193,8 @@ export function namedCard(heading, external, ...extra) {
 }
 function side(heading, name, reference, url, since, extra) {
     const card = node('section', '', 'account');
+    // The heading, name and reference together, so a grid can line them up as one part.
+    const identity = node('div', '', 'identity');
     const title = node('h3');
     const value = node(url ? 'a' : 'strong', name);
     title.append(...heading);
@@ -268,18 +204,18 @@ function side(heading, name, reference, url, since, extra) {
         // The name and the date share a line, and the date wraps under a long name.
         const named = node('div', '', 'named');
         named.append(value, node('span', since, 'muted since'));
-        card.append(title, named);
+        identity.append(title, named);
     }
     else
-        card.append(title, value);
+        identity.append(title, value);
     if (typeof reference === 'string')
-        card.append(node('div', reference, 'muted reference'));
+        identity.append(node('div', reference, 'muted reference'));
     else if (reference) {
         const groups = node('div', '', 'muted reference fingerprint');
         groups.append(...reference.map((group) => node('span', group)));
-        card.append(groups);
+        identity.append(groups);
     }
-    card.append(...extra);
+    card.append(identity, ...extra);
     return card;
 }
 /** What the holder is told before an account is retired, since it cannot be undone from here. */
@@ -535,6 +471,21 @@ function cautionMark() {
  * Opens and shuts what a card folds away: how its account was shown, every method of it
  * together so that none is put ahead of another, and its dates.
  */
+/**
+ * Scrolls what a reader just opened into view, once it has been laid out. It moves only as
+ * far as needed, and puts the top in view when the whole does not fit in the pane.
+ */
+function reveal(element) {
+    requestAnimationFrame(() => {
+        const pane = element.closest('.pane');
+        const tall = pane !== null && element.offsetHeight > pane.clientHeight;
+        const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+        element.scrollIntoView({
+            block: tall ? 'start' : 'nearest',
+            behavior: still ? 'auto' : 'smooth',
+        });
+    });
+}
 function foldToggle(folded, fold) {
     const toggle = node('button', '', 'fold');
     let shown = fold.open;
@@ -550,6 +501,8 @@ function foldToggle(folded, fold) {
     toggle.onclick = () => {
         set(!shown);
         fold.toggle(shown);
+        if (shown)
+            reveal(folded.at(-1));
     };
     return toggle;
 }
@@ -626,22 +579,25 @@ function externalCard(evidence, manage, later = () => { }, fold, warned = () =>
     if (fold)
         bar.append(foldToggle([...methods, dates], fold), ...row);
     const logo = providerMark(evidence.provider, evidence.attestations.external[0].method);
+    // Everything under the verdict in one part, the third of the card's rows in a grid.
+    const rest = node('div', '', 'rest');
+    rest.append(...(fold ? [bar, ...methods, dates] : [...methods, dates, ...row]));
     const card = namedCard(
     // The mark and the name, or just the name. A mark that falls back to writing the name
     // would print it twice here, since this heading writes it either way.
     logo ? [logo, document.createTextNode(provider)] : [document.createTextNode(provider)], evidence.external, 
     // Status first, then how it was shown, then when. The proof explains the state
     // above it, so it cannot sit before that state has been given.
-    summary, ...(fold ? [] : methods), 
+    summary, 
     // How the holder lists the account, in their words and apart from how it was shown:
-    // nothing checked it, so it is never among the methods above it.
+    // nothing checked it, so it is never among the methods below it.
     ...(evidence.status === 'revoked' || retired
         ? []
         : evidence.mark === 'preferred'
             ? [node('div', 'Preferred', 'listing preferred')]
             : evidence.mark === 'unused'
                 ? [node('div', 'No longer used', 'listing')]
-                : []), ...(fold ? [bar, ...methods, dates] : [dates, ...row]));
+                : []), rest);
     const surface = retired ? 'account retired' : 'account';
     card.className = surface;
     // A signed record is not read, or acted on, before its signature has been checked: until
@@ -678,7 +634,9 @@ function addRow(manage) {
  * The subject once, then each account linked to it on its own card, in the order given.
  * Retired accounts sit in a group of their own at the foot, under what says they are,
  * shut until it is opened unless no other account is left to read. Every record given is
- * of the one subject, which the caller has checked.
+ * of the one subject, which the caller has checked. Returns whether the cards a reader
+ * sees on opening are four or more: the accounts in use, or the retired ones when
+ * nothing else is left and their group starts open.
  */
 function render(content, records, manage, later, folds = { open: false, cards: new Set() }) {
     const [first] = records;
@@ -692,6 +650,7 @@ function render(content, records, manage, later, folds = { open: false, cards: n
         site: first.siteName,
         provider: first.providerName,
     }));
+    localCard.className += ' local';
     const retired = records.filter((record) => record.status === 'retired');
     const listed = records.filter((record) => record.status !== 'retired');
     // A card alone in its group has room for its dates. Among others it folds them.
@@ -708,9 +667,11 @@ function render(content, records, manage, later, folds = { open: false, cards: n
     const count = node('summary', '', 'group');
     count.append(foldMark(), document.createTextNode(`Retired accounts (${retired.length})`));
     // A signature that fails is a warning, and a warning is not left behind a fold.
-    history.append(count, ...cards(retired, () => {
+    const gone = node('div', '', 'tiles');
+    gone.append(...cards(retired, () => {
         history.open = true;
     }));
+    history.append(count, gone);
     // Shut to keep history out of the way of the accounts in use. With none of those there
     // is nothing else to read, so it starts open.
     history.open = folds.retired ?? !listed.length;
@@ -718,11 +679,16 @@ function render(content, records, manage, later, folds = { open: false, cards: n
     // group turns, so what it will be is the opposite of what it is.
     count.addEventListener('click', () => {
         folds.retired = !history.open;
+        if (folds.retired)
+            reveal(history);
     });
-    content.replaceChildren(localCard, linkMark(), ...cards(listed), ...(manage ? [addRow(manage)] : []), ...(retired.length ? [history] : []), 
+    const accounts = node('div', '', 'tiles');
+    accounts.append(...cards(listed));
+    content.replaceChildren(localCard, linkMark(), accounts, ...(manage ? [addRow(manage)] : []), ...(retired.length ? [history] : []), 
     // Nothing below the cards may name a provider. Approval, method and dates belong to
     // the card they came from, and a second provider on this subject gets its own card.
     node('p', 'Verification does not guarantee legal identity, trustworthiness, or permanent ownership.', 'muted explanation'));
+    return (listed.length || retired.length) >= 4;
 }
 /**
  * Fetch fresh, permitted evidence; native dialog supplies focus containment and Escape
@@ -896,7 +862,8 @@ detailsOpen = false) {
         drawn = key;
         // The cards are new, and what the old ones were waiting to try again went with them.
         retries.clear();
-        render(content, records, actions, (retry) => retries.add(retry), folds);
+        const many = render(content, records, actions, (retry) => retries.add(retry), folds);
+        dialog.className = many ? 'many' : '';
     };
     /**
      * Redraws at the moment the next record runs out, where that comes before the next check
@@ -974,6 +941,7 @@ detailsOpen = false) {
     }, { once: true });
     if (opened && [opened].flat().length)
         draw(opened);
+    holdPage(dialog);
     dialog.showModal();
     void refresh();
 }

package/dist/browser/mark.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "@media (prefers-reduced-motion: no-preference) {\n  .mark.current path:last-child {\n    animation: verily-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards;\n  }\n}\n@keyframes verily-draw {\n  from {\n    stroke-dasharray: 0 176;\n  }\n  to {\n    stroke-dasharray: 108 176;\n  }\n}\n";
+export default _default;

package/dist/browser/mark.css.js

@@ -0,0 +1,2 @@
+// Generated from mark.css by scripts/css.mjs. Do not edit.
+export default "@media (prefers-reduced-motion: no-preference) {\n  .mark.current path:last-child {\n    animation: verily-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards;\n  }\n}\n@keyframes verily-draw {\n  from {\n    stroke-dasharray: 0 176;\n  }\n  to {\n    stroke-dasharray: 108 176;\n  }\n}\n";

package/dist/browser/mark.d.ts

@@ -4,7 +4,7 @@ export type { MarkTone };
  * The check draws itself in from its left end once the verification holds: when a pill's
  * mark first becomes `current`, and each time the dialog opens on a current one.
  */
-export declare const markStyles = "\n  @media (prefers-reduced-motion: no-preference) {\n    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }\n  }\n  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }\n";
+export declare const markStyles = "@media (prefers-reduced-motion: no-preference) {\n  .mark.current path:last-child {\n    animation: verily-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards;\n  }\n}\n@keyframes verily-draw {\n  from {\n    stroke-dasharray: 0 176;\n  }\n  to {\n    stroke-dasharray: 108 176;\n  }\n}\n";
 /** Repaints a mark in place, so answering a check never replaces the drawing. */
 export declare function paintMark(svg: SVGSVGElement, tone: MarkTone): void;
 /** V2: the green check fills its section of the symmetric red V. */

package/dist/browser/mark.js

@@ -1,14 +1,10 @@
 import { tones, verification } from '../marks.js';
+import markCss from './mark.css.js';
 /**
  * The check draws itself in from its left end once the verification holds: when a pill's
  * mark first becomes `current`, and each time the dialog opens on a current one.
  */
-export const markStyles = `
-  @media (prefers-reduced-motion: no-preference) {
-    .mark.current path:last-child { animation: verily-draw .8s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
-  }
-  @keyframes verily-draw { from { stroke-dasharray: 0 176; } to { stroke-dasharray: 108 176; } }
-`;
+export const markStyles = markCss;
 /** Repaints a mark in place, so answering a check never replaces the drawing. */
 export function paintMark(svg, tone) {
     const colors = tones[tone];