@bkazemi/verily 0.9.4 → 0.10.0

package/README.md

@@ -118,7 +118,7 @@ const verily = createVerily({
 
 Sign-in methods need an app registered with the provider. The callback URL is always `<baseUrl>/callback`, and every place you run Verily, development included, needs its own registered.
 
-- **GitHub:** [register an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) and set its callback URL. An OAuth app has only one, so development and production each need their own app.
+- **GitHub:** run `npx verily github-app <callback>...`, open the address it prints in a browser signed in to GitHub, and click **Create GitHub App**. It prints the client id and secret. One app can list up to 10 callback URLs, so development and production can share it. Add `--org <name>` for an organization to own the app, or `--name <name>` if the default name is taken. You can instead [register an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) by hand, which has only one callback URL.
 - **Discord:** create an application in the [Discord developer portal](https://discord.com/developers/applications) and add the callback URL under **OAuth2 → Redirects**. One application can list several. Discord shows the client secret only when you reset it.
 - **YouTube:** in the [Google Cloud console](https://console.cloud.google.com/), enable the YouTube Data API v3, create an OAuth client of type **Web application**, and add the callback URL as an authorized redirect URI. One client can list several. The `youtube.readonly` scope is sensitive: until Google verifies your app, users see a warning and only 100 accounts can ever use it, so apply for verification before offering it publicly.
 
@@ -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.4/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.10.0/dist/verily.js`. The script defines a global `Verily`.
 
 Then place the badge wherever the account appears:
 
@@ -217,6 +217,8 @@ It lists up to four verified accounts, then counts the rest, such as `+2 more`.
 
 With several accounts, each card shows the name, status and verifier, with the method and dates behind a Details toggle. Add `details-open`, or pass `{ detailsOpen: true }`, to start every card open.
 
+A sign-in counts until its record expires, a year by default. To ask for more recent proof, add `max-age`, such as `max-age="30d"`, or pass `{ maxAgeMs }`. A record whose account was last proved before then reads as Unconfirmed until its holder renews it. A bare number is seconds, and `s`, `m`, `h` and `d` set the unit. A published proof is reread on a schedule, so `max-age` mostly affects sign-ins and mailed codes. Each card shows when its account was last proved. For a published proof that is Last checked. For a sign-in or code it is Approved, or Authenticated where a renewal by another method moved the approval later.
+
 The badge refreshes every 30 seconds and reads only public evidence. The client can also start and end connections, and draw a badge into your own element:
 
 ```js
@@ -370,7 +372,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.4/dist/verily.js"
+  src="https://cdn.jsdelivr.net/npm/@bkazemi/verily@0.10.0/dist/verily.js"
   defer
 ></script>
 <verily-badge
@@ -460,7 +462,7 @@ const { [user.id]: connections } = await verily.connections([user.id]);
 const verified = connections.filter((c) => c.status === 'verified');
 ```
 
-Show only `verified` records as verified. A `retired` record carries `retiredAt` and can be shown as history, never as a current account. `mark` is `preferred` or `unused` where the user set one; it is their ordering, not something checked.
+Show only `verified` records as verified. Pass `{ maxAgeMs }` to read a record whose account was last proved longer ago than that as `unconfirmed`. A `retired` record carries `retiredAt` and can be shown as history, never as a current account. `mark` is `preferred` or `unused` where the user set one; it is their ordering, not something checked.
 
 To show them, hand the records to the badge. It draws them as given and fetches nothing, so it works for unlisted links, which a browser cannot read for itself:
 
@@ -598,7 +600,7 @@ An instance sets `dns: true`.
 
 ## Operations
 
-Verification lasts 30 days, flows 10 minutes, and sharing links 7 days. Change them with `validityMs`, `flowTtlMs` and `shareTtlMs`. Evidence is never cached.
+Verification lasts a year, flows 10 minutes, and sharing links 7 days. Change them with `validityMs`, `flowTtlMs` and `shareTtlMs`. Evidence is never cached. A published proof that `recheck()` still finds extends its record once half the term is gone, so only a sign-in or a mailed code needs renewing. Raising `validityMs` lengthens records still running on the next `recheck()`; lowering it shortens nothing.
 
 A user's DNS setup is saved for seven days. If propagation outlasts a flow's ten minutes, they choose DNS again and get the same TXT value and the last domain entered. Each return reads the proof afresh. The TXT record has to stay after verification, for the ongoing checks.
 
@@ -641,6 +643,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 .identity > a, .account.retired .identity > 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  /* Four or more accounts on a wide screen: two equal cards to a row. */\n  @media (min-width: 960px) {\n    dialog.many { width: min(900px, calc(100vw - 32px)); }\n    dialog.many .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }\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 { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-top: 0; }\n    /* The dates sit at the foot of the third part, so they line up too. */\n    dialog.many .tiles .rest { display: flex; flex-direction: column; }\n    dialog.many .tiles .rest > dl { margin-top: auto; }\n    dialog.many .tiles .rest > :has(+ dl) { margin-bottom: 16px; }\n    /* The site's card is one tile wide, centred over the two columns. */\n    dialog.many .local { width: calc(50% - 6px); margin-inline: auto; text-align: center; }\n    dialog.many .local h3, dialog.many .local .named { justify-content: center; }\n    dialog.many .local .additional { padding-left: 0; }\n  }\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 { attestationLabel, externalId, externalIdGroups, externalLink, externalName, externalSince, authenticatedEarlier, 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,120 +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 .identity > a, .account.retired .identity > 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; }
-  /* Four or more accounts on a wide screen: two equal cards to a row. */
-  @media (min-width: 960px) {
-    dialog.many { width: min(900px, calc(100vw - 32px)); }
-    dialog.many .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
-    /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall as
-       the taller card's part, so the verdicts and details of neighbouring cards line up. */
-    dialog.many .tiles > .account { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-top: 0; }
-    /* The dates sit at the foot of the third part, so they line up too. */
-    dialog.many .tiles .rest { display: flex; flex-direction: column; }
-    dialog.many .tiles .rest > dl { margin-top: auto; }
-    dialog.many .tiles .rest > :has(+ dl) { margin-bottom: 16px; }
-    /* The site's card is one tile wide, centred over the two columns. */
-    dialog.many .local { width: calc(50% - 6px); margin-inline: auto; text-align: center; }
-    dialog.many .local h3, dialog.many .local .named { justify-content: center; }
-    dialog.many .local .additional { padding-left: 0; }
-  }
-  ${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;
@@ -643,11 +561,15 @@ function externalCard(evidence, manage, later = () => { }, fold, warned = () =>
             evidence.expiresAt,
         ]);
     }
-    // When an artifact was last read belongs with the other times, not inside a sentence.
-    // Only artifact methods drift: a sign-in is established once and does not go stale.
+    // When the account was last proved: a published proof when it was last read, and a
+    // sign-in or mailed code when it happened, where that is not already the approval date.
     const main = evidence.attestations.external[0];
-    if (main.artifactUrl && !retired)
-        dateRows.push(['Last checked', main.confirmedAt]);
+    if (!retired) {
+        if (main.artifactUrl)
+            dateRows.push(['Last checked', main.confirmedAt]);
+        else if (authenticatedEarlier(evidence))
+            dateRows.push(['Authenticated', evidence.authenticatedAt]);
+    }
     for (const [label, time] of dateRows) {
         dates.append(node('dt', label), node('dd', moment(time)));
     }
@@ -1023,6 +945,7 @@ detailsOpen = false) {
     }, { once: true });
     if (opened && [opened].flat().length)
         draw(opened);
+    holdPage(dialog);
     dialog.showModal();
     void refresh();
 }

package/dist/browser/index.d.ts

@@ -20,6 +20,11 @@ export interface Arrangement {
      * open or shut each either way.
      */
     detailsOpen?: boolean;
+    /**
+     * How recently an account must have been proved to count as verified, in milliseconds.
+     * An older record reads as unconfirmed. Unset, a record counts until it expires.
+     */
+    maxAgeMs?: number;
 }
 /**
  * Presents records the page already holds, without asking any backend for them. This is
@@ -51,9 +56,10 @@ export declare function init({ backendUrl, handoffUrl }: {
     /** The site's current public connections, so an embed need not hardcode ids. */
     listPublished(): Promise<Evidence[]>;
     getConnection(id: string): Promise<Evidence>;
-    mountBadge(element: HTMLElement, { connectionId, evidence }: {
+    mountBadge(element: HTMLElement, { connectionId, evidence, maxAgeMs, }: {
         connectionId: string;
         evidence?: Evidence;
+        maxAgeMs?: number;
     }): Promise<void>;
     /**
      * Several of one subject's public connections as a single pill. One that cannot be