@bkazemi/verily 0.9.4 → 0.10.0

package/dist/browser/index.js

@@ -1,4 +1,4 @@
-import { accountsOf } from '../core/index.js';
+import { accountsOf, parseMaxAge, withMaxAge } from '../core/index.js';
 import { routePath } from '../core/routes.js';
 import { badgeShown, quietBadge, renderBadge, renderBadgeMessage, renderBadgePending, renderConnectPill, } from './badge.js';
 import { openConnectDialog, } from './connect-dialog.js';
@@ -92,7 +92,7 @@ function details(element) {
                         throw error;
                 }
             }
-        }, latestGroup.get(element), accounts, managers.get(element), openHosts.has(element));
+        }, latestGroup.get(element), (records) => accounts(aged(element, records)), managers.get(element), openHosts.has(element));
     }
 }
 /**
@@ -103,6 +103,24 @@ function details(element) {
 const stackedHosts = new WeakSet();
 const quietHosts = new WeakSet();
 const openHosts = new WeakSet();
+/** The max age each host was given, where the page set one. */
+const maxAges = new WeakMap();
+/** Sets or clears a host's max age. */
+function bound(element, maxAgeMs) {
+    if (maxAgeMs === undefined)
+        maxAges.delete(element);
+    else
+        maxAges.set(element, maxAgeMs);
+}
+/**
+ * The records as this host's max age has them read. Call it on records already resolved
+ * by `standing()`, since a signed record can carry different proof dates.
+ */
+function aged(element, records) {
+    const maxAgeMs = maxAges.get(element);
+    const now = Date.now();
+    return records.map((e) => withMaxAge(e, maxAgeMs, now));
+}
 /**
  * How many accounts a pill names before it counts the rest. A stacked pill pays for each
  * row in the page's height. A panel floats over the page and pays nothing, but it cannot
@@ -111,7 +129,8 @@ const openHosts = new WeakSet();
 const stackedAccounts = 4;
 const peekedAccounts = 8;
 /** Records how a host's pill is arranged, from what the page last said. */
-function arrange(element, { stacked, peek, detailsOpen }) {
+function arrange(element, { stacked, peek, detailsOpen, maxAgeMs }) {
+    bound(element, maxAgeMs);
     if (detailsOpen)
         openHosts.add(element);
     else
@@ -164,7 +183,7 @@ function accounts(records) {
  * `load` gives the records afresh when the dialog opens and as it stays open.
  */
 function presentGroup(element, records, load) {
-    const ordered = accounts(records.map(standing));
+    const ordered = accounts(aged(element, records.map(standing)));
     const verified = ordered.filter(live);
     const lead = verified[0] ?? ordered[0];
     latestGroup.set(element, records);
@@ -448,7 +467,8 @@ export function init({ backendUrl, handoffUrl }) {
                 throw new Error('Invalid evidence response');
             return data;
         },
-        async mountBadge(element, { connectionId, evidence }) {
+        async mountBadge(element, { connectionId, evidence, maxAgeMs, }) {
+            bound(element, maxAgeMs);
             // Evidence already in hand renders at once. Otherwise a host with nothing to show
             // gets the waiting pill, whose frame and mark the finished badge keeps; a host that
             // already shows a badge keeps it up until the check answers, so a periodic refresh
@@ -477,7 +497,7 @@ export function init({ backendUrl, handoffUrl }) {
                     return [fresh];
                 });
                 const draw = () => {
-                    const badge = renderBadge(element, standing(e));
+                    const badge = renderBadge(element, aged(element, [standing(e)])[0]);
                     // Null means the pill on screen is unchanged. Its handler stands, and reads the above.
                     if (badge)
                         opens(element, badge);
@@ -503,7 +523,10 @@ export function init({ backendUrl, handoffUrl }) {
             const ids = [...new Set(connectionIds)];
             arrange(element, arrangement);
             if (ids.length === 1)
-                return client.mountBadge(element, { connectionId: ids[0] });
+                return client.mountBadge(element, {
+                    connectionId: ids[0],
+                    maxAgeMs: arrangement.maxAgeMs,
+                });
             if (!badgeShown(element))
                 renderBadgePending(element);
             const read = async () => {
@@ -713,6 +736,7 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
             'stacked',
             'peek',
             'details-open',
+            'max-age',
         ];
         handed;
         /**
@@ -773,6 +797,7 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
                 stacked: this.getAttribute('stacked') !== null,
                 peek: this.getAttribute('peek') !== 'off',
                 detailsOpen: this.getAttribute('details-open') !== null,
+                maxAgeMs: parseMaxAge(this.getAttribute('max-age')),
             };
             // The holder's own badge, where the page says so: its dialog connects another
             // account, renews one and removes one, through the backend named. The host hears
@@ -838,7 +863,11 @@ if (typeof customElements !== 'undefined' && !customElements.get('verily-badge')
                 return;
             }
             if (backendUrl)
-                void init({ backendUrl }).mountBadge(this, { connectionId, evidence });
+                void init({ backendUrl }).mountBadge(this, {
+                    connectionId,
+                    evidence,
+                    maxAgeMs: arrangement.maxAgeMs,
+                });
         }
     });
 }

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];

package/dist/core/index.d.ts

@@ -615,6 +615,30 @@ export declare function fresh(attestation: Attestation, now: number, freshness?:
  * proved when it happened, and a published proof when it was last read.
  */
 export declare function lastProved(evidence: Pick<Evidence, 'authenticatedAt' | 'attestations'>): number;
+/**
+ * Whether a sign-in or mailed code happened more than a day before the record was last
+ * approved. That only happens after a renewal by another method. Otherwise the two dates
+ * match and a card shows only the approval.
+ */
+export declare function authenticatedEarlier(evidence: Pick<Evidence, 'authenticatedAt' | 'approvedAt'>): boolean;
+/**
+ * Whether a record's account was last proved within `maxAgeMs` of `now`. A reader who
+ * wants recent proof sets its own bound: a sign-in counts once, a year ago or this morning,
+ * and only the reader knows how old is too old.
+ */
+export declare function recent(evidence: Pick<Evidence, 'authenticatedAt' | 'attestations'>, maxAgeMs: number, now: number): boolean;
+/**
+ * The record as a reader with a `maxAgeMs` bound sees it. A verified record last proved
+ * before the bound reads as unconfirmed: not disproved, only not proved recently enough.
+ * With no bound the record is returned as is.
+ */
+export declare function withMaxAge<T extends Evidence>(evidence: T, maxAgeMs: number | undefined, now: number): T;
+/**
+ * A max age written as a whole number with an optional unit: `s`, `m`, `h` or `d`. A bare
+ * number is seconds, as in HTTP and OpenID Connect. Returns milliseconds, or undefined
+ * for anything else.
+ */
+export declare function parseMaxAge(text: string | null | undefined): number | undefined;
 /**
  * The word for a record's state. Evidence can be read after it was issued, so an approval
  * that has run out since reads as expired whatever status it was issued with.

package/dist/core/index.js

@@ -80,6 +80,46 @@ export function lastProved(evidence) {
     const main = evidence.attestations.external[0];
     return main.artifactUrl ? main.confirmedAt : evidence.authenticatedAt;
 }
+/**
+ * Whether a sign-in or mailed code happened more than a day before the record was last
+ * approved. That only happens after a renewal by another method. Otherwise the two dates
+ * match and a card shows only the approval.
+ */
+export function authenticatedEarlier(evidence) {
+    return evidence.approvedAt - evidence.authenticatedAt > 86400000;
+}
+/**
+ * Whether a record's account was last proved within `maxAgeMs` of `now`. A reader who
+ * wants recent proof sets its own bound: a sign-in counts once, a year ago or this morning,
+ * and only the reader knows how old is too old.
+ */
+export function recent(evidence, maxAgeMs, now) {
+    return now - lastProved(evidence) <= maxAgeMs;
+}
+/**
+ * The record as a reader with a `maxAgeMs` bound sees it. A verified record last proved
+ * before the bound reads as unconfirmed: not disproved, only not proved recently enough.
+ * With no bound the record is returned as is.
+ */
+export function withMaxAge(evidence, maxAgeMs, now) {
+    return maxAgeMs !== undefined &&
+        evidence.status === 'verified' &&
+        !recent(evidence, maxAgeMs, now)
+        ? { ...evidence, status: 'unconfirmed' }
+        : evidence;
+}
+/**
+ * A max age written as a whole number with an optional unit: `s`, `m`, `h` or `d`. A bare
+ * number is seconds, as in HTTP and OpenID Connect. Returns milliseconds, or undefined
+ * for anything else.
+ */
+export function parseMaxAge(text) {
+    const match = /^\s*(\d+)\s*([smhd]?)\s*$/.exec(text ?? '');
+    if (!match)
+        return undefined;
+    const unit = { '': 1000, s: 1000, m: 60000, h: 3600000, d: 86400000 }[match[2]];
+    return Number(match[1]) * unit;
+}
 /**
  * The word for a record's state. Evidence can be read after it was issued, so an approval
  * that has run out since reads as expired whatever status it was issued with.

package/dist/instance/bin.js

@@ -1,9 +1,13 @@
 #!/usr/bin/env node
+import { parseArgs } from 'node:util';
 import { serve } from './serve.js';
 import { init } from './init.js';
+import { githubApp } from './github-app.js';
 const usage = `Usage:
   verily serve                    Run an instance on Node, from the environment.
-  verily init cloudflare [dir]    Write a Cloudflare project into dir.`;
+  verily init cloudflare [dir]    Write a Cloudflare project into dir.
+  verily github-app <callback>... [--org <name>] [--name <name>]
+                                  Create a GitHub App for sign-in, up to 10 callbacks.`;
 /** Writes the starter, then says what to do with it. */
 async function start(directory) {
     await init(directory);
@@ -15,6 +19,29 @@ Next, in that directory:
   3. npx wrangler secret put OWNER_KEY
   4. npm run deploy`);
 }
+/** Runs the manifest flow, then prints the app's credentials. */
+async function createGithubApp(args) {
+    const { values, positionals } = parseArgs({
+        args,
+        allowPositionals: true,
+        options: { org: { type: 'string' }, name: { type: 'string' } },
+    });
+    const app = await githubApp({
+        callbacks: positionals,
+        org: values.org,
+        name: values.name,
+        onReady: (url) => console.log(`Open ${url} in a browser signed in to GitHub.`),
+    });
+    console.log(`Created ${app.htmlUrl}
+
+GITHUB_CLIENT_ID=${app.clientId}
+GITHUB_CLIENT_SECRET=${app.clientSecret}
+
+Keep the secret on the server. GitHub shows it only this once.
+
+To show a logo when people sign in, upload one under Display information at
+${app.htmlUrl}`);
+}
 const [command, target, directory] = process.argv.slice(2);
 try {
     if (command === 'serve') {
@@ -25,6 +52,9 @@ try {
     else if (command === 'init' && target === 'cloudflare') {
         await start(directory ?? '.');
     }
+    else if (command === 'github-app') {
+        await createGithubApp(process.argv.slice(3));
+    }
     else {
         console.error(usage);
         process.exit(command === undefined || command === '--help' || command === '-h' ? 0 : 2);

package/dist/instance/github-app.d.ts

@@ -0,0 +1,26 @@
+/** What `githubApp()` gets back from GitHub once the app is created. */
+export interface GithubAppCredentials {
+    clientId: string;
+    clientSecret: string;
+    /** The app's settings page on GitHub. */
+    htmlUrl: string;
+}
+/**
+ * Registers a GitHub App for sign-in through GitHub's manifest flow. A local server serves a
+ * form that posts the manifest to GitHub, the holder clicks Create there, and GitHub
+ * redirects back with a code that is exchanged for the app's client id and secret.
+ *
+ * The app is public, so any GitHub account can sign in with it, and asks for no
+ * permissions and no webhook.
+ */
+export declare function githubApp(options: {
+    /** The callback URLs to register, at most 10. */
+    callbacks: string[];
+    /** The organization to own the app. Without one, the signed-in GitHub account owns it. */
+    org?: string;
+    /** The app's name, unique across GitHub. Defaults to one made from the first callback. */
+    name?: string;
+    fetch?: typeof fetch;
+    /** Called with the local address to open in a browser. */
+    onReady: (url: string) => void;
+}): Promise<GithubAppCredentials>;

package/dist/instance/github-app.js

@@ -0,0 +1,94 @@
+import { randomBytes } from 'node:crypto';
+import { createServer } from 'node:http';
+import { escape } from '../server/escape.js';
+/**
+ * Registers a GitHub App for sign-in through GitHub's manifest flow. A local server serves a
+ * form that posts the manifest to GitHub, the holder clicks Create there, and GitHub
+ * redirects back with a code that is exchanged for the app's client id and secret.
+ *
+ * The app is public, so any GitHub account can sign in with it, and asks for no
+ * permissions and no webhook.
+ */
+export async function githubApp(options) {
+    const { callbacks, org } = options;
+    const request = options.fetch ?? fetch;
+    if (callbacks.length === 0)
+        throw new Error('Name at least one callback URL');
+    if (callbacks.length > 10)
+        throw new Error('GitHub allows at most 10 callback URLs');
+    for (const callback of callbacks)
+        if (!URL.canParse(callback) || !/^https?:$/.test(new URL(callback).protocol))
+            throw new Error(`${callback} is not an http or https URL`);
+    if (org !== undefined && !/^[a-z\d](?:[a-z\d-]*[a-z\d])?$/i.test(org))
+        throw new Error(`${org} is not a GitHub organization name`);
+    // GitHub caps app names at 34 characters.
+    const name = options.name ?? `Verily ${new URL(callbacks[0]).hostname}`.slice(0, 34);
+    const state = randomBytes(16).toString('base64url');
+    const server = createServer();
+    await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
+    const local = `http://127.0.0.1:${server.address().port}`;
+    const manifest = {
+        name,
+        description: `Sign-in for Verily on ${new URL(callbacks[0]).hostname}.`,
+        url: new URL(callbacks[0]).origin,
+        redirect_url: `${local}/done`,
+        callback_urls: callbacks,
+        public: true,
+        hook_attributes: { url: new URL(callbacks[0]).origin, active: false },
+        default_permissions: {},
+    };
+    const target = new URL(org
+        ? `https://github.com/organizations/${org}/settings/apps/new`
+        : 'https://github.com/settings/apps/new');
+    target.searchParams.set('state', state);
+    const credentials = new Promise((resolve, reject) => {
+        server.on('request', (req, res) => {
+            const url = new URL(req.url ?? '/', local);
+            const reply = (status, title, text, body = '') => {
+                res.writeHead(status, { 'Content-Type': 'text/html; charset=utf-8' });
+                res.end(`<!doctype html><meta charset="utf-8"><title>${escape(title)}</title><p>${escape(text)}</p>${body}`);
+            };
+            if (url.pathname === '/') {
+                // The form submits itself, with a button for when scripts are off.
+                return reply(200, 'Create the GitHub App', 'Sending you to GitHub to create the app.', `<form method="post" action="${escape(target.href)}">` +
+                    `<input type="hidden" name="manifest" value="${escape(JSON.stringify(manifest))}">` +
+                    '<button>Continue to GitHub</button></form>' +
+                    '<script>document.forms[0].submit()</script>');
+            }
+            if (url.pathname !== '/done')
+                return reply(404, 'Not found', 'Not found.');
+            const code = url.searchParams.get('code');
+            // A request without the state this run made did not come from GitHub's redirect.
+            if (url.searchParams.get('state') !== state || !code)
+                return reply(400, 'Wrong link', 'This link is not from this run. Nothing was created.');
+            void convert(code).then((result) => {
+                reply(200, 'GitHub App created', 'The app is created. Go back to the terminal.');
+                resolve(result);
+            }, (error) => {
+                reply(502, 'Failed', 'GitHub did not return the app. See the terminal.');
+                reject(error);
+            });
+        });
+    });
+    async function convert(code) {
+        const response = await request(`https://api.github.com/app-manifests/${encodeURIComponent(code)}/conversions`, {
+            method: 'POST',
+            headers: { Accept: 'application/vnd.github+json', 'User-Agent': 'Verily-V0' },
+            signal: AbortSignal.timeout(15000),
+        });
+        const app = await response.json().catch(() => undefined);
+        if (!response.ok ||
+            !isRecord(app) ||
+            typeof app.client_id !== 'string' ||
+            typeof app.client_secret !== 'string' ||
+            typeof app.html_url !== 'string')
+            throw new Error(`GitHub did not return the app (HTTP ${response.status})`);
+        return { clientId: app.client_id, clientSecret: app.client_secret, htmlUrl: app.html_url };
+    }
+    options.onReady(`${local}/`);
+    // Closing waits for the last reply to be sent, then drops idle connections.
+    return await credentials.finally(() => server.close());
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}

package/dist/instance/index.js

@@ -907,8 +907,10 @@ class Server {
             html `<p class="evidence"><a href="${e.evidenceUrl}">Inspect evidence</a></p>`, html `<dl>${rows.map(([label, value]) => html `<dt>${label}</dt><dd>${value}</dd>`)}</dl>`, shown && html `<p class="fine">${shown}</p>`, !site &&
             e.visibility === 'public' &&
             html `
-              <p class="fine">Embed on your site</p>
-              <pre><code>${highlightHtml(embed)}</code></pre>
+              <details class="embed">
+                <summary class="fine">Embed on your site</summary>
+                <pre><code>${highlightHtml(embed)}</code></pre>
+              </details>
             `, html `
             ${(goes.length > 0 || listing) && html `<div class="actions">${goes}${listing}</div>`}
             ${ending}

package/dist/instance/starter.js

@@ -20,7 +20,7 @@ const wrangler = `// Your instance's Cloudflare settings. Fill in account_id and
   "account_id": "YOUR_CLOUDFLARE_ACCOUNT_ID",
   "main": "worker.ts",
   "compatibility_date": "2026-07-01",
-  "compatibility_flags": ["nodejs_compat"],
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
   // The library loads undici only on Node, so the Worker build gets a stand-in for it.
   "alias": { "undici": "@bkazemi/verily/instance/undici" },
 

package/dist/server/index.js

@@ -1,4 +1,4 @@
-import { attestationLabel, externalName, isArtifactProvider, isCodeProvider, isRedirectProvider, lastProved, accountsOf, localSide, proofTitle, providerMethod, statusLabel, signedBy, } from '../core/index.js';
+import { attestationLabel, externalName, isArtifactProvider, isCodeProvider, isRedirectProvider, authenticatedEarlier, lastProved, accountsOf, localSide, proofTitle, providerMethod, statusLabel, signedBy, } from '../core/index.js';
 import { artifactAttempts, codeAttempts, VerilyService, Unavailable, } from './service.js';
 import { copyScript, waitScript } from './copy.js';
 import { html } from './html.js';
@@ -400,7 +400,9 @@ function accountCard(e, external, now) {
         : [
             ['Approved', e.approvedAt],
             [e.expiresAt > now ? 'Valid until' : 'Expired on', e.expiresAt],
-            ['Last checked', external[0].artifactUrl ? external[0].confirmedAt : undefined],
+            external[0].artifactUrl
+                ? ['Last checked', external[0].confirmedAt]
+                : ['Authenticated', authenticatedEarlier(e) ? e.authenticatedAt : undefined],
         ])}
       </div>
     `, 

package/dist/server/service.d.ts

@@ -142,6 +142,8 @@ export declare class VerilyService {
     /** What a signed record says, if this instance signed it. */
     checked(signed: unknown): Promise<SignedDocument | undefined>;
     private get sendLimits();
+    /** How long an approval stands. A published proof that is still up extends it. */
+    private get validity();
     /** A proof is only as fresh as the schedule that reads it, so both live together. */
     private get freshness();
     validateLocal(local: LocalAccount): LocalAccount;

package/dist/server/service.js

@@ -173,6 +173,10 @@ export class VerilyService {
             address: this.options.sendLimits?.address ?? 5,
         };
     }
+    /** How long an approval stands. A published proof that is still up extends it. */
+    get validity() {
+        return this.options.validityMs ?? 365 * 86400000;
+    }
     /** A proof is only as fresh as the schedule that reads it, so both live together. */
     get freshness() {
         return this.options.freshnessMs ?? freshnessMs;
@@ -925,7 +929,7 @@ export class VerilyService {
                     authenticatedAt: flow.authenticatedAt,
                     approvedAt: this.now(),
                     connectedAt: this.now(),
-                    expiresAt: this.now() + (this.options.validityMs ?? 30 * 86400000),
+                    expiresAt: this.now() + this.validity,
                     attestations: {
                         local: this.declared(flow),
                         external: [this.attestation(flow, provider, connectionId)],
@@ -1229,7 +1233,7 @@ export class VerilyService {
         const created = createdAt === undefined ? {} : { createdAt };
         connection.local = flow.local;
         connection.approvedAt = this.now();
-        connection.expiresAt = this.now() + (this.options.validityMs ?? 30 * 86400000);
+        connection.expiresAt = this.now() + this.validity;
         connection.revocationReason = undefined;
         if (attestation.method === main.method) {
             connection.authenticatedAt = flow.authenticatedAt;
@@ -1537,6 +1541,19 @@ export class VerilyService {
         const interval = this.options.recheckMs ?? 86400000;
         const now = this.now();
         const spent = new Map();
+        // Validity counts from approval, so a longer term set since applies to running records.
+        await this.transaction(async (tx) => {
+            for (const connection of await tx.list('connections')) {
+                const term = connection.approvedAt + this.validity;
+                if (connection.revokedAt === undefined &&
+                    connection.retiredAt === undefined &&
+                    connection.expiresAt > now &&
+                    connection.expiresAt < term) {
+                    connection.expiresAt = term;
+                    await tx.put('connections', connection.id, connection);
+                }
+            }
+        });
         // When a proof was last read, or last tried. One whose last read did not confirm it,
         // because the read failed or the proof was missing, is tried again four times as soon.
         const tried = (a) => a.readAt ?? a.confirmedAt;
@@ -1718,6 +1735,10 @@ export class VerilyService {
             }
             held.confirmedAt = started;
             delete held.absentAt;
+            // A proof still up keeps its record running. It is moved only once half the term is
+            // gone, so a daily read does not report a new expiry every time.
+            if (current.expiresAt > started && current.expiresAt - started < this.validity / 2)
+                current.expiresAt = started + this.validity;
             // A zone can start or stop being signed, so the flag is as the last read found it.
             if (dnssec)
                 held.dnssec = true;

package/dist/server/style.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '\u00B7';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\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.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n\n/* The embed snippet is copied once, so it stays closed until asked for. */\n.embed summary {\n  width: fit-content;\n  cursor: pointer;\n}\n.embed summary:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.embed pre {\n  margin-top: 0;\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";
+export default _default;

package/dist/server/style.css.js

@@ -0,0 +1,2 @@
+// Generated from style.css by scripts/css.mjs. Do not edit.
+export default ":root {\n  --ink: #23312b;\n  --muted: #6b786f;\n  --line: #dce2de;\n  --surface: #fff;\n  --raised: #f7f9f7;\n  --accent: #245f43;\n  --warn: #a4442b;\n  --caution: #b07a12;\n  --syntax-tag: #245f43;\n  --syntax-attr: #8a5a0b;\n  --syntax-string: #2b5f8a;\n  color-scheme: light dark;\n  accent-color: var(--accent);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --ink: #dde5e0;\n    --muted: #96a39b;\n    --line: #2f3b35;\n    --surface: #161a18;\n    --raised: #1d2220;\n    --accent: #7fc4a2;\n    --warn: #e59a82;\n    --caution: #d9a843;\n    --syntax-tag: #7fc4a2;\n    --syntax-attr: #d9a843;\n    --syntax-string: #8fbbe0;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0 1rem 4rem;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    16px/1.65 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  text-rendering: optimizeLegibility;\n}\n\nmain {\n  max-width: 34rem;\n  margin: 0 auto;\n  padding-top: 3rem;\n}\n\n/*\n * The logotype, above the page's own heading, on its own dark plate. Sized so the word is\n * the height it was without the plate, whose margin makes the box that much taller. The\n * word is white in either scheme: the plate is what it is read against, not the page.\n */\n.logo {\n  display: block;\n  height: 2.5rem;\n  margin-bottom: 1.5rem;\n}\n\nh1 {\n  margin: 0 0 1.75rem;\n  padding-bottom: 1rem;\n  border-bottom: 1px solid var(--line);\n  font-size: 1.5rem;\n  font-weight: 620;\n  letter-spacing: -0.02em;\n  line-height: 1.25;\n}\n\n/*\n * A page holding one thing needs no rule under its heading. The rule divides a heading\n * from the record beneath it, and a page that only asks for a key has no record to divide.\n */\nmain.single h1 {\n  margin-bottom: 1.25rem;\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n/*\n * A page holding one thing sits in the middle of the window rather than at its top,\n * where it would leave most of the window empty below it.\n */\nbody:has(main.single) {\n  display: flex;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\nmain.single {\n  width: 100%;\n  max-width: 24rem;\n  margin: auto;\n  padding-bottom: 3rem;\n}\n\nh2 {\n  margin: 2rem 0 0.75rem;\n  font-size: 1.125rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\nh3 {\n  margin: 0 0 0.5rem;\n  font-size: 1rem;\n  font-weight: 620;\n}\n\np {\n  margin: 0 0 1rem;\n  overflow-wrap: break-word;\n}\n\na {\n  color: var(--accent);\n  text-underline-offset: 3px;\n  overflow-wrap: anywhere;\n}\n\na:hover {\n  text-decoration-thickness: 2px;\n}\n\n/*\n * Something to be run or published exactly as written. Its own line breaks are kept and a\n * long line is soft-wrapped rather than cut off: a soft wrap is drawn, not inserted, so\n * what is copied is still character for character what was written. Selecting inside the\n * block takes all of it, since half a command is worse than none.\n */\npre {\n  position: relative;\n  margin: 0 0 1rem;\n  /* Room along the top line for the copy button, which sits over the block rather than in it. */\n  padding: 0.75rem 5.25rem 0.75rem 0.875rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--raised);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  user-select: all;\n}\n\ncode {\n  font:\n    0.8125rem/1.6 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Highlighted HTML, marked up by highlight.js. Brackets stay muted so the names read first. */\n.hljs-tag {\n  color: var(--muted);\n}\n.hljs-name {\n  color: var(--syntax-tag);\n}\n.hljs-attr {\n  color: var(--syntax-attr);\n}\n.hljs-string {\n  color: var(--syntax-string);\n}\n\n/* Made by a script, so it exists only where it works. Quiet: the block is the point. */\n.copy {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.1875rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 5px;\n  background: var(--surface);\n  color: var(--muted);\n  font:\n    500 0.75rem/1.5 system-ui,\n    sans-serif;\n  user-select: none;\n}\n\n.copy:hover {\n  color: var(--ink);\n  border-color: var(--muted);\n}\n\n/*\n * The two sides of the link, which is what a reader came to read. Each fact about a side\n * gets its own line: what it is, what it is called, the identifier behind that, and how it\n * was shown. Everything else on the page qualifies the pair, so it is set quieter.\n */\n.side {\n  margin-bottom: 0.75rem;\n  padding: 0.875rem 1rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/*\n * A subject's accounts are peers, so where there is room they sit two across. The page\n * that lists them is wider for it, and a narrow one keeps them in a single column.\n */\nmain:has(.accounts) {\n  max-width: 54rem;\n}\n\n.accounts {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.accounts .side {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n/* How the holder lists the account, in the card's corner and out of the lines below. */\n.listing {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  padding: 0.0625rem 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  color: var(--muted);\n  font-size: 0.6875rem;\n  font-weight: 550;\n}\n\n.listing.preferred {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n/* The times sit at the foot of the card, so they line up along a row of uneven cards. */\n.accounts .side dl {\n  margin-top: auto;\n}\n.accounts .rest {\n  display: flex;\n  flex-direction: column;\n}\n.accounts .rest > p:last-of-type {\n  margin-bottom: 0.625rem;\n}\n\n/*\n * Two across, with the subject one card wide and centred above them. Every card on the\n * page is then the same width.\n */\n@media (min-width: 48rem) {\n  .accounts {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  /* Each card is three rows of the grid: who, its verdict, and the rest. A row is as tall\n     as the taller card's part, so the verdicts and times of neighbouring cards line up. */\n  .accounts > .side {\n    display: grid;\n    grid-row: span 3;\n    grid-template-rows: subgrid;\n    row-gap: 0;\n  }\n  .subject {\n    width: calc(50% - 0.375rem);\n    margin-inline: auto;\n    text-align: center;\n  }\n  .subject .name {\n    justify-content: center;\n  }\n}\n\n/* Between a subject and its accounts on the page that lists them. */\n.joiner {\n  display: block;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin: 0 auto 0.75rem;\n  color: var(--muted);\n}\n\n.who {\n  margin: 0 0 0.125rem;\n  color: var(--muted);\n  font-size: 0.75rem;\n  font-weight: 550;\n  letter-spacing: 0.02em;\n}\n\n/* A provider's mark before its name, at the height of the letters. */\n.who .provider {\n  display: inline-block;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.375rem;\n  vertical-align: -0.125rem;\n}\n\n/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */\n.name {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 0 1rem;\n  margin: 0 0 0 -4px;\n  padding-left: 4px;\n  overflow-x: clip;\n  font-size: 1.0625rem;\n  font-weight: 620;\n  letter-spacing: -0.01em;\n}\n\n/* The account's creation date, after the name and a dot. It wraps under a long name. */\n.name .since {\n  position: relative;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n\n/* The dot sits in the gap before the date. */\n.name .since::before {\n  content: '·';\n  position: absolute;\n  left: -0.5rem;\n  transform: translateX(-50%);\n}\n\n/* The name is the card's subject before it is a link, so the rule is drawn on hover. */\n.name a {\n  text-decoration: none;\n}\n\n.name a:hover {\n  text-decoration: underline;\n}\n\n.reference,\n.how {\n  margin: 0;\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.5;\n}\n\n.identity + .how {\n  margin-top: 0.5rem;\n}\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.how.additional {\n  padding-left: 0.75rem;\n}\n/* The \"signed\" pill after the verifier's name, one size smaller than the line it sits on. */\n.how .signed-mark {\n  display: inline-block;\n  margin-left: 0.3125rem;\n  padding: 0 0.375rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  font-size: 0.625rem;\n  font-weight: 550;\n  line-height: 1.3;\n  text-decoration: none;\n  vertical-align: 0.0625rem;\n}\n\n.fine {\n  color: var(--muted);\n  font-size: 0.8125rem;\n  line-height: 1.55;\n  margin-bottom: 0.625rem;\n}\n\n/* That the record is signed is a fact about it, so it is set as one and not as fine print. */\n.signed {\n  font-size: 0.875rem;\n  line-height: 1.55;\n  margin-bottom: 0.875rem;\n}\n/* Arrived at from a badge's \"signed\" link, so the reader is shown where they landed. */\n.signed:target {\n  margin-inline: -0.75rem;\n  padding: 0.625rem 0.75rem;\n  border-radius: 8px;\n  background: var(--raised);\n}\n\n/* Every time on the record in one column, so they can be compared rather than hunted for. */\ndl {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 0.3rem 1.5rem;\n  margin: 1.25rem 0;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n  font-size: 0.8125rem;\n}\n\ndt {\n  color: var(--muted);\n}\n\ndd {\n  margin: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inside a card the rule above it is the card's own edge, so the list needs none. */\nsection dl {\n  margin: 0.5rem 0 1rem;\n  padding-top: 0;\n  border-top: 0;\n}\n\n/* Right under the heading, the heading's own rule is the one above it. */\nh1 + dl {\n  padding-top: 0;\n  border-top: 0;\n}\n.side dl {\n  margin: 0.625rem 0 0;\n  padding-top: 0.625rem;\n}\n\n/* The links under a record, ruled off from the record and its disclaimer. */\nfooter {\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--line);\n}\nfooter > :last-child {\n  margin-bottom: 0;\n}\n\nsection {\n  margin: 0 0 1.25rem;\n  padding: 1.25rem 1.375rem;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n}\n\nsection > :last-child {\n  margin-bottom: 0;\n}\n\n/* What holds a control that cannot be undone. */\nsection.danger,\nsection.caution {\n  margin-top: 2rem;\n}\nsection.danger {\n  border-color: var(--warn);\n}\n\n/* What holds a control that breaks something for a while, but can be recovered from. */\nsection.caution {\n  border-color: var(--caution);\n}\nsection > h2:first-child {\n  margin-top: 0;\n}\n\nform {\n  margin: 0 0 1.5rem;\n}\n\nlabel {\n  display: block;\n  margin: 0 0 0.75rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\ninput,\ntextarea {\n  display: block;\n  width: 100%;\n  margin-top: 0.375rem;\n  padding: 0.5rem 0.625rem;\n  border: 1px solid var(--line);\n  border-radius: 6px;\n  background: var(--surface);\n  color: var(--ink);\n  font:\n    0.875rem/1.5 ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n\n/* Height comes from the rows attribute, which differs per box. */\ntextarea {\n  resize: vertical;\n}\n\ninput:focus-visible,\ntextarea:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\nbutton {\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font:\n    500 0.9375rem/1.4 system-ui,\n    -apple-system,\n    'Segoe UI',\n    sans-serif;\n  cursor: pointer;\n}\n\n/* A link that starts something, drawn as a button. */\na.button {\n  display: inline-block;\n  padding: 0.5rem 1rem;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--accent);\n  color: var(--surface);\n  font-weight: 500;\n  font-size: 0.9375rem;\n  line-height: 1.4;\n  text-decoration: none;\n}\n\nbutton + button {\n  margin-left: 0.5rem;\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* The other choice beside a page's one action, such as Cancel. */\na.button.secondary {\n  border-color: var(--line);\n  background: none;\n  color: var(--ink);\n}\n\n/* A page's action and its alternative, side by side. */\n.choice {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choice form {\n  margin: 0;\n}\n\n/* Ways to verify: one full-width button per method, none filled over the others. */\n.choices {\n  display: grid;\n  gap: 0.5rem;\n  margin-bottom: 1.5rem;\n}\n.choices form {\n  margin: 0;\n}\n\n.choices button {\n  width: 100%;\n  text-align: left;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n}\n\n.choices button:hover {\n  border-color: var(--muted);\n}\n\n/* A provider's mark before a button's label, at the height of the letters. */\nbutton .provider {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  vertical-align: -0.1875rem;\n}\n\n/* A control that ends something. Filled where it is the page's one action. */\nbutton.danger {\n  border-color: var(--warn);\n  background: var(--warn);\n}\n\n/*\n * A connection on the settings page: the account's card, then what can be done with it.\n * Its state sits in the card's corner, on the line that names the method.\n */\n.connection {\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.state {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  height: 1.625rem;\n  padding: 0 0.75rem 0 0.5rem;\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n  font-weight: 550;\n}\n\n/*\n * The V the badge draws, in the tone that says how the record stands. A record that claims\n * nothing is drawn faint in the text colour, as the badge draws it.\n */\n.verdict {\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n}\n.verdict.pending {\n  opacity: 0.45;\n}\n.how .verdict {\n  width: 0.875rem;\n  height: 0.875rem;\n  margin-right: 0.3125rem;\n  vertical-align: -0.125rem;\n}\n/* Cropped to its strokes and taller than the heading's letters, centred beside them. */\nh1:has(.verdict) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\nh1 .verdict {\n  width: auto;\n  height: 2.25rem;\n}\n\n/*\n * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms\n * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.\n */\n.state .verdict {\n  width: auto;\n  height: 100%;\n}\n\n/*\n * A pill's line includes room for descenders below the letters, which leaves its text\n * sitting high. Trimmed to the letters, the padding alone sets the space above and below.\n * In a state pill the word alone is trimmed, so it centres on the V by its letters.\n */\n@supports (text-box: trim-both cap alphabetic) {\n  .listing {\n    padding: 0.3125rem 0.5rem;\n    text-box: trim-both cap alphabetic;\n  }\n  .state > span {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Links that sit together on one line, wrapping where there is no room. */\n.links {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem 1.25rem;\n  font-size: 0.875rem;\n}\n\n/* Under the account's id, with the facts about it rather than the controls. */\n.evidence {\n  margin: 0.375rem 0 0;\n  font-size: 0.8125rem;\n}\n\n.connection dl {\n  margin-bottom: 0.75rem;\n}\n.connection .side > :last-child {\n  margin-bottom: 0;\n}\n.connection pre {\n  margin: 0.75rem 0;\n  background: var(--surface);\n}\n\n/* The embed snippet is copied once, so it stays closed until asked for. */\n.embed summary {\n  width: fit-content;\n  cursor: pointer;\n}\n.embed summary:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n.embed pre {\n  margin-top: 0;\n}\n.connection .actions {\n  margin-top: 0.875rem;\n}\n\n/* The buttons for one connection in a row, wrapping where there is no room. */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}\n.actions form {\n  display: contents;\n}\n\n.actions button,\n.actions a.button {\n  margin: 0;\n  padding: 0.3125rem 0.75rem;\n  border-color: var(--line);\n  background: var(--surface);\n  color: var(--ink);\n  font-size: 0.8125rem;\n}\n\n.actions button:hover,\n.actions a.button:hover {\n  border-color: var(--muted);\n}\n\n/* The controls that cannot be undone, together at the foot of the card. */\n.ending {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--line);\n}\n.ending form {\n  margin: 0;\n}\n\n.ending button.danger {\n  padding: 0.3125rem 0.75rem;\n  background: var(--surface);\n  color: var(--warn);\n  font-size: 0.8125rem;\n}\n\nfieldset {\n  margin: 0 0 1.25rem;\n  padding: 1rem 1.125rem 0.25rem;\n  border: 1px solid var(--line);\n  border-radius: 8px;\n}\n\nlegend {\n  padding: 0 0.375rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n\nfieldset label {\n  display: flex;\n  align-items: baseline;\n  gap: 0.5rem;\n  color: var(--ink);\n  font-size: 0.9375rem;\n}\n\nfieldset input {\n  width: auto;\n  margin: 0;\n}\n\nfieldset p {\n  margin: 0.25rem 0 0.875rem 1.5rem;\n  color: var(--muted);\n  font-size: 0.8125rem;\n}\n";